我在我的应用程序中添加了此React路由器。当用户搜索应用程序以编程方式路由到/ search的内容时,但是当我尝试向后移动时,没有任何呈现。我在route标签中添加了初始组件
<Link to="/">
<MovieIcon style={{ fontSize: "48px", cursor: "pointer" }} />
</Link>
<div className={classes.grow} />
<div className={classes.search} onKeyDown={this.handleSearch}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>
handleSearch = e => {
if (e.which === 13 && e.target.value !== "") {
this.props.handleSearch(e.target.value);
this.props.history.push("/search");
}
app.js
<div className="App">
<Navbar handleSearch={this.props.searchMovie} />
<Route
exact
path="/"
render={props => {
console.log("rendering movie browser");
return <Moviebrowser {...props} topMovies={this.props.topMovies} />;
}}
/>
<Route path="/search" component={MovieSearch} />
</div>
index.js
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>