v6路由配置错误导致子路由无法显示的解决方案详解

在React Router v6升级过程中，路由配置错误导致子路由无法显示是一个常见问题。本文将详细解析这一问题的解决方案。

问题复现

首先，让我们通过一个典型的错误示例来重现问题：

// 错误配置
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user" element={<UserLayout />}>  // 注意这里缺少了子路由定义
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

上述代码中，如果UserLayout组件没有正确渲染子路由内容，就会出现子路由无法显示的问题。

根本原因

在v6中，子路由必须通过Outlet组件来渲染。如果父路由组件中没有使用<Outlet />，子路由将不会被渲染。正确的配置应该是：

import { Outlet } from 'react-router-dom';

function UserLayout() {
  return (
    <div>
      <h1>用户中心</h1>
      <Outlet /> {/* 这里必须有Outlet */}
    </div>
  );
}

// 正确的路由配置
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user" element={<UserLayout />}>  
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}