React Router v6 共享布局

Question

阅读路线布局后，我想用布局包装路线的一些元素，但让其他元素没有布局。

这是示例：

应用程序.jsx

import React from 'react';
import { Routes, BrowserRouter, Route } from 'react-router-dom';

export default function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<p>Home</p>} />

          <Route element={<div style={{ background: 'red' }} />}>
            <Route path="/login" element={<p>Login</p>} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );

当我转到时，/我可以看到文本“Home”，它没有布局。
但是，当我不进行/login任何渲染时，它应该渲染包裹文本“登录”的红色背景布局。

这是一个实时代码沙箱： https://stackblitz.com/edit/github-hwpla5 ?devtoolsheight=33&file=src/App.jsx

我做错了什么？
谢谢

Answer 1

您必须<Outlet />在布局元素内渲染 for 来指定应安装活动子路由的位置。

<Routes>
  <Route path="/" element={<p>Home</p>} />
  <Route element={<div style={{ background: 'red' }} > <Outlet /> </div>}>
    <Route path="/login" element={<p>Login</p>} />
  </Route>
</Routes>