0

I added this react router to my app.when user searches something the app programatically routes to /search but when i try to move backwards nothing is rendered.I have added initial component in route tag

            <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>

0 Answers0