I am currently working on a simple project using React with TypeScript, and I have run into an issue where the page content does not refresh as expected without having to reload the page. I am unsure of the underlying cause of this behavior. I have included a breakdown of the project files and code. Any assistance in resolving this issue would be greatly appreciated. Please help me rectify this problem.
App.tsx
import React from 'react'
import './App.css';
import Menu from './Menu';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import routes from './route-config';
function App() {
return (
<BrowserRouter>
<Menu />
<div className='container'>
<Switch>
{
routes.map(route=>
<Route key={route.path} path={route.path} exact={route.exact}>
<route.component/>
</Route>
)
}
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
route-config.tsx
import CreateGenre from "./component/genres/CreateGenre";
import EditGenre from "./component/genres/EditGenre";
import IndexGenres from "./component/genres/IndexGenres";
import LandingPage from "./component/movies/LandingPage";
const routes = [
{path:'/genres',component:IndexGenres, exact:true},
{path:'/genres/create',component:CreateGenre},
{path:'/genres/edit',component:EditGenre},
{path:'/',component:LandingPage, exact:true}
]
export default routes;
Menu.tsx
import React from 'react'
import { NavLink } from 'react-router-dom'
const Menu = () => {
return (
<nav className='navbar navbar-expand-lg navbar-light bg-light'>
<div className='container-fluid'>
<NavLink to="/" className='navbar-brand'>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>
)
}
export default Menu
LandingPage.tsx
import React, { useEffect, useState } from 'react'
import MoviesList from './MoviesList'
import { landingPageDTO } from './movies.model'
const LandingPage = () => {
const [movies, setMovies] = useState<landingPageDTO>({})
useEffect(() => {
const timerId = setTimeout(() => {
setMovies({
inTheaters: [
{
id: 1,
title: 'Spider-Man: Faar From Home',
poster: 'https://upload.wikimedia.org/wikipedia/en/b/bd/Spider-Man_Far_From_Home_poster.jpg'
},
{
id: 2,
title: 'Luca',
poster: 'https://upload.wikimedia.org/wikipedia/en/thumb/3/33/Luca_%282021_film%29.png/220px-Luca_%282021_film%29.png'
}
],
upcomingReleases: [
{
id: 3,
title: 'Soul',
poster: 'https://upload.wikimedia.org/wikipedia/en/3/39/Soul_%282020_film%29_poster.jpg'
}
]
})
}, 1000)
return () => clearTimeout(timerId)
},[])
return (
<>
<h3>In Theatres</h3>
<MoviesList movies={movies.inTheaters} />
<h3>Upcoming Release</h3>
<MoviesList movies={movies.upcomingReleases} />
</>
)
}
export default LandingPage
Onclick change content without any reload.