React Router 6 alpha 4 嵌套路由答案

【问题标题】：React Router 6 alpha 4 nested routesReact Router 6 alpha 4 嵌套路由
【发布时间】：2020-05-09 12:07:58
【问题描述】：

给出如下沙盒，不知道怎么渲染Bb组件

import React from "react";
import "./styles.css";
import { Routes, Route } from "react-router";
import { BrowserRouter } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="a" element={<Aa />}>
          <Route path="b" element={<Bb />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Aa() {
  return (
    <p>
      Hello
    </p>
  );
}

function Bb() {
  return <p>World</p>;
}

https://codesandbox.io/s/still-shadow-337zc?file=/src/App.js

浏览到 /a/b 只呈现 Aa 组件

【问题讨论】：

RR6 中嵌套路由的综合教程：robinwieruch.de/react-router-nested-routes

标签： reactjs react-router

【解决方案1】：

react-router v6 公开了一个 Outlet 元素，您必须在父 Route 中使用该元素，以便任何嵌套的子节点都可以由它的 react-router-dom 渲染

import React from "react";
import "./styles.css";
import { Routes, Route } from "react-router";
import { BrowserRouter, Outlet } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="a" element={<Aa />}>
          <Route path="b" element={<Bb />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Aa() {
  return <p>Hello <Outlet /></p>;
}

function Bb() {
  return <p>World</p>;
}

Working demo

如果您只希望 Bb 在 a/b 处呈现，则将其定义为单独的路由，例如

<BrowserRouter>
  <Routes>
    <Route path="a" element={<Aa />}/>
    <Route path="a/b" element={<Bb />} />
  </Routes>
</BrowserRouter>

您可以在depth here 中阅读有关路由结构的更多信息

【讨论】：

好的，谢谢！如果我只希望 Bb 在 /a/b url 上呈现，我该怎么办？我需要 Aa 只渲染一个新的路由组件吗？我的情况是我不想在 /a/b 上渲染 Aa，而只在 /a 和 Bb 上渲染 /a/b
谢谢你，太完美了
很高兴能帮助交配

【解决方案2】：

@Shubham Khatri 回答的补充说明：

<Route path="a" element={<Aa />}>
    <Route path="b" element={<Bb />} />
</Route>

/a/b/ 将渲染

<Aa>
  <Bb />
</Aa>

如果你只想显示Bb 组件，嵌套路由不是正确的方式。

阅读更多here

【讨论】：