Вложенные маршруты React Router 6 alpha 4

Question

Предоставляя следующую песочницу, не уверен, что понимаете, как визуализировать компонент 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

Answer 1

response-router v6 предоставляет элемент Outlet, который вы должны использовать внутри вашего родительского маршрута, чтобы любые вложенные дочерние элементы могли быть отображены с помощью response-router-dom isnide от него

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>;
}

Рабочая демонстрация

Если вы хотите, чтобы только Bb отображался в a/b, вы определяете его как отдельный маршрут, например

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

Вы можете прочитать подробнее о структурировании маршрута в глубине здесь

Answer 2

дополнительное примечание к ответу @Shubham Khatri:

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

/a/b/ будет отображать

<Aa>
  <Bb />
</Aa>

Если вы хотите отображать только компонент Bb, вложенный маршрут не является правильный путь.

Подробнее здесь