React Router v6 共享布局

Question

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

示例如下：

App.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>
  );

当我转到 / 时，我可以看到文本“主页”，它没有布局。
但是当我转到 /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>

React Router v6 共享布局

React Router v6 shared layouts

reactjs

react-router

router