React+TypeScript单页应用无刷新切换内容不加载问题求助

我正在开发一个基于React与TypeScript的基础项目，点击导航切换路由时，页面不会重载，但内容无法按预期刷新。附上项目相关文件代码，求指导解决，实现无刷新切换内容。

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

问题核心在于路由组件的渲染方式不符合React规范：你直接用<route.component/>渲染组件，但React要求自定义组件的名称必须首字母大写，否则会被识别为普通HTML标签，导致组件无法正常渲染。

修改App.tsx中的路由渲染逻辑，将route.component赋值给一个首字母大写的变量后再渲染：

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=> {
              // 将组件赋值给首字母大写的变量
              const Component = route.component;
              return (
                <Route key={route.path} path={route.path} exact={route.exact}>
                  <Component/>
                </Route>
              )
            })
          }
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

修改后，React就能正确识别并渲染路由对应的组件，点击导航时即可实现无刷新切换内容。

额外检查点：

• 确认react-router-dom版本与代码匹配（当前代码使用的是v5的SwitchAPI，若使用v6需改为Routes嵌套写法）
• 验证IndexGenres、CreateGenre等组件本身能正常渲染内容

内容的提问来源于stack exchange，提问作者Hasib Shanto