React基础组件无法渲染问题排查求助

核心问题 #

你使用的是react-router-dom v6，但代码里沿用了v5版本的Route组件写法（component/render属性、exact参数），而v6已经彻底废弃了这些API，这就是路由组件无法渲染的根本原因。

已排查操作确认 #

你已经完成了正确的基础排查：

• 所有组件名称均以大写字母开头
• 组件名称及引用拼写无误
• 已重启本地服务

这些步骤排除了基础错误，但问题出在路由API的版本差异上。

修复方案 #

将AppRouter.js中的路由代码修改为v6的标准写法：

修改后的AppRouter.js #

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from '../components/Header';
import AddGame from '../components/AddGame';
import GameList from '../components/GameList';
import '../styles.scss';
import useLocalStorage from '../hooks/useLocalStorage';

const AppRouter = () => {
  const [games, setGames] = useLocalStorage('games', [])
  
  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Routes>
            {/* v6 使用element属性传递组件，默认精准匹配，无需exact */}
            <Route path="/" element={<GameList />} />
            {/* 直接在element中传入自定义props */}
            <Route path="/add" element={<AddGame games={games} setGames={setGames} />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default AppRouter;

关键说明 #

1. react-router-dom v6中，Route组件不再支持component、render属性，统一使用element接收JSX元素
2. v6默认采用精准匹配，exact属性已被移除，无需手动添加
3. 若需要路由相关的参数（如路径参数、location对象），可在组件内通过useParams、useLocation等hooks直接获取

修改后重启本地服务，点击Header中的链接即可正常渲染对应组件。

内容的提问来源于stack exchange，提问作者C.G.