使用Routes/Navigate调试React路由遇空白页及类调用错误求助

一、路由页面空白的核心遗漏点 #

1. Route组件属性写错了 #

旧版React Router用component或render指定渲染组件，新版v6必须用element属性，而且要传JSX元素，不是组件引用：

// 错误写法（只换了Routes，没改Route）
<Routes>
  <Route path="/" component={Home} /> {/* v6不支持component属性 */}
</Routes>

// 正确写法
<Routes>
  <Route path="/" element={<Home />} />
</Routes>

这是初学者最容易犯的错，直接替换Switch为Routes，但没改Route的写法，导致路由找不到要渲染的元素，页面自然空白。

2. Navigate的使用位置错了 #

旧版Redirect可以直接放在Switch里，新版Navigate必须嵌套在Route的element中，或者在组件内用useNavigate钩子跳转：

// 错误写法（直接把Redirect换成Navigate放在Routes里）
<Routes>
  <Navigate to="/" /> {/* 无效，Routes只能包含Route组件 */}
</Routes>

// 正确写法（404重定向）
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="*" element={<Navigate to="/" replace />} />
</Routes>

另外replace属性对应旧版Redirect的from逻辑，用来替换历史记录，避免回退循环。

3. 没有用Routes包裹所有Route组件 #

v6要求所有Route必须直接或间接放在Routes内部，不能有Route在Routes外面，否则不会被识别：

// 错误写法
<Routes>
  <Route path="/" element={<Home />} />
</Routes>
<Route path="/about" element={<About />} /> {/* 这个路由不会生效 */}

// 正确写法
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

4. 嵌套路由的实现逻辑变了 #

旧版嵌套路由是在父组件里写Switch和子Route，新版需要用Outlet组件承载子路由内容，同时子Route要嵌套在父Route的children中：

// 父组件Dashboard.jsx
import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <Outlet /> {/* 子路由内容会渲染在这里 */}
    </div>
  );
}

// 路由配置
<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} /> {/* 相对路径，对应/dashboard/profile */}
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

如果没加Outlet，子路由的内容根本不会渲染，也是页面空白的常见原因。

二、DebugRouter的“Cannot call a class as a function”错误解决 #

React Router v6完全改用了函数组件API，旧版基于类组件的DebugRouter实现已经不兼容了。你不需要写类组件，直接用函数组件包装即可：

import { BrowserRouter, useLocation } from 'react-router-dom';

// 自定义调试路由组件
function DebugRouter({ children }) {
  const location = useLocation();
  console.log('当前路由路径:', location.pathname);
  console.log('路由参数:', location.search);
  return children;
}

// 使用方式
function App() {
  return (
    <BrowserRouter>
      <DebugRouter>
        <Routes>
          {/* 你的路由配置 */}
        </Routes>
      </DebugRouter>
    </BrowserRouter>
  );
}

这个组件会在路由变化时打印当前的路由信息，帮你排查问题。

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