React Router v6配置共享布局时子路由不渲染该如何解决？

错误原因 #

React Router v6 的嵌套布局路由规则要求，父布局路由对应的组件必须渲染 <Outlet /> 组件，作为子路由内容的挂载出口。你当前的布局路由只声明了红色背景的div，没有预留子路由渲染位置，所以/login路径匹配后，子路由的Login内容没有地方渲染，导致页面空白。

修正后的代码 #

首先需要从react-router-dom中引入Outlet组件，再修改布局路由的element：

import React from 'react';
// 新增导入Outlet
import { Routes, BrowserRouter, Route, Outlet } from 'react-router-dom';

export default function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<p>Home</p>} />
          {/* 布局路由中添加<Outlet />作为子路由出口 */}
          <Route element={<div style={{ background: 'red' }}><Outlet /></div>}>
            <Route path="/login" element={<p>Login</p>} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

修改后访问/login路径时，Login文本就会被渲染到红色背景的布局容器中，符合预期效果。

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