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>
);
}