1
Routing is configure in App.tsx file. This is the render method of the App.tsx file.


 ```
      <BrowserRouter>
        <Menu />
        <div className='container'>
          <Switch>
            <Route exact path='/'>
              <h3>In theaters</h3>
              <MovieList movies={movies.movies} />
              <h3>Upcoming Release</h3>
              <MovieList movies={movies.upcoming} />
            </Route>
            <Route path='/genres'>
              <IndexGenre />
            </Route>
          </Switch>
        </div>
      </BrowserRouter>
    
        ```
    
        export default function Menu() {
      return (
        <nav className='navbar navbar-expand-md navbar-light bg-light'>
          <div className='container-fluid'>
            <Link to='/' className='navbar-brand'>
              React movies
            </Link>
            <div className='collapse navbar-collapse'>
              <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
                <li className='nav-item'>
                  <Link to='/genres' className='nav-link active'>
                    genres
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      );
    }

```

Clicking on the genre link, changes the url, but does not display the IndexGenre component. It still displays the same home page info But, if I directly go to the genre page by typing in the browser /genres, It shows the genre page. The github linked https://github.com/crmaccr/React_Movie.git.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181

0 Answers0