css – Without Reload Web Page Web Content not Filling

I’m working with a standard job making use of React with TypeScript. Nonetheless, I have actually come across a problem where the web page web content does not rejuvenate as anticipated without calling for a web page reload. However, I doubt regarding the origin of this habits. I have actually given a break down of the job’s documents together with the code. I would certainly value your advice in fixing this issue. Please help me in remedying this problem

App.tsx

 import React from 'respond'.
import './ App.css';.
import Food selection from './ Food selection';.
import {BrowserRouter, Path, Change} from 'react-router-dom';.
import paths from './ route-config';.

feature Application() {
return (.

<< BrowserRouter>>.
<< Food selection/>>.
<< div className=" container">
<> < Change>>.
{
routes.map( course=>>.
<< Path trick= {route.path} course= {route.path} exact= {route.exact} >>.
<< route.component/>>.
<.
).
}
<.
<.
<.
);.
}

export default Application;.

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 paths =[
    {path:'/genres',component:IndexGenres, exact:true},
    {path:'/genres/create',component:CreateGenre},
    {path:'/genres/edit',component:EditGenre},
    {path:"https://stackoverflow.com/",component:LandingPage, exact:true}

]

export default paths;.

Menu.tsx

 import React from 'respond'.
import {NavLink} from 'react-router-dom'.

const Food selection = () => > {
return (.
<< nav className=" navbar navbar-expand-lg navbar-light bg-light">>.
<< div className=" container-fluid">
<> < NavLink to="/" className=" navbar-brand">> React Movies<.
<< 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="/ categories">
> Categories.
<.
<.
<.
<.

<.
<.
).
}

export default Food selection.

LandingPage.tsx

 import React, {useEffect, useState} from 'respond'.
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<.
<< MoviesList films= {movies.inTheaters}/>>.

<< h3>> Upcoming Launch<.
<< MoviesList films= {movies.upcomingReleases}/>>.

<.
).
}

export default LandingPage.

Onclick modification web content with no reload.