React-router-dom v6按语法编写仍无法渲染组件且控制台报错

常见诱因 #

• 路由层级不符合v6硬性要求：所有<Route>组件必须是<Routes>的直接子节点，不能在二者之间插入普通DOM、自定义容器组件（比如把路由守卫包在<Route>外层），否则路由匹配逻辑无法正常读取路由配置，直接抛出错误。
• element属性传值错误：v6废弃了v5的component/render配置项，必须通过element传入已实例化的JSX元素，如果直接传入组件函数引用（比如写element={Home}而非element={<Home />}），会导致组件无法正常挂载。
• 依赖版本冲突：本地依赖中同时存在v5、v6两个版本的react-router相关包，或者项目React版本低于16.8，不满足v6的Hooks运行要求，会导致内部API调用异常。
• 嵌套路由路径配置错误：父级嵌套路由未在路径末尾加/*通配符，导致内部子路由路径无法被正常匹配，出现白屏。

修复步骤 #

1. 先调整路由结构，保证<Route>和<Routes>的直接父子关系，参考标准写法：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import UserLayout from './pages/UserLayout';
import UserProfile from './pages/UserProfile';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 嵌套路由父路径必须末尾加/*，才能匹配后续子路径 */}
        <Route path="/user/*" element={<UserLayout />}>
          <Route path="profile" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

2. 清理冗余依赖，锁定v6版本：
   执行以下命令重装依赖，避免多版本共存：

npm uninstall react-router react-router-dom
npm install react-router-dom@6

安装完成后检查package.json，确认没有残留5.x版本的react-router相关依赖。
3. 权限守卫类逻辑不要包裹<Route>，要放到element属性内部，避免打断路由层级：

// 错误写法：AuthGuard插在Routes和Route之间，破坏层级
<Routes>
  <AuthGuard>
    <Route path="/admin" element={<Admin />} />
  </AuthGuard>
</Routes>

// 正确写法：守卫组件包裹实际渲染的页面组件，不影响Route层级
<Routes>
  <Route 
    path="/admin" 
    element={
      <AuthGuard>
        <Admin />
      </AuthGuard>
    } 
  />
</Routes>

相关报错现象参考：

绝大多数符合基础语法但仍报错的场景，都是路由层级被自定义组件打断导致的，优先排查这一项即可快速定位问题。

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