1

The problem is that when I click in the Genres button in navbar, only the URL changes to "/genres" and not the page content. I tried without the NavLink it worked well, the same happens with MovieList which is default while using NavLink.

App.tsx

return (
  <BrowserRouter>
    <Menu />
    <div className="container">
      <Switch>
        <Route exact path="/">
          <h3>In theaters</h3>
          <MoviesList movies={movies.inTheaters} />

          <h3>Upcoming Releases</h3>
          <MoviesList movies={movies.upComingReleases} />
        </Route>

        <Route path="/genres">
          <IndexGenres />
        </Route>

      </Switch>
    </div>
  </BrowserRouter>
);

In the menu component I am using NavLink

export default function Menu() {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <NavLink className="navbar-brand" to="/">
          React Movies
        </NavLink>
        <div className="collapse navbar-collapse">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <NavLink className="nav-link" to="genres">
                Genres
              </NavLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
jonrexh
  • 49
  • 4

0 Answers0