Вложенный маршрут не отображает компонент

Попробуйте обернуть RoutesRouter

Ссылка на мой stackblitz и играйте с ним..

Кроме того, быстрое чтение >> https://dev.to/tywenk/how-to-use-nested-routes-in-react-router-6-4jhd

import * as React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link,
  Outlet,
} from 'react-router-dom';

export default function App() {
  return (
    <div className = "App">
      <Router>
        <nav>
          <Link to = "/">Home</Link> <Link to = "route1">Route 1</Link>
        </nav>
        <Routes>
          <Route path = "/" element = {<Home />}>
            <Route path = "route1" element = {<Route1 />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

function Route1() {
  return <h1>"In Route 1"</h1>;
}

function Home() {
  return (
    <React.Fragment>
      <h1>"In Home"</h1>
      <Outlet />
    </React.Fragment>
  );
}

Использование <nav> необязательно.. добавлено только для демонстрации.. вы можете использовать свой собственный метод маршрутизации действий (с помощью ссылок, кнопок и т. д.)

Компонент Home отображается как маршрут макета , поэтому он должен отображать компонент Outlet для вложенных маршрутов.

export default function App() {
  return (
    <div className = "App">
      <Routes>
        <Route path = "/" element = {<Home />}> // <-- Layout route
          <Route path = "route1" element = {<Route1 />} /> // <-- Nested route
        </Route>
      </Routes>
    </div>
  );
}

export default function Home() {
  return (
    <>
      <h1>Home Page</h1>
      <Outlet /> // <-- Nested routes render element here
    </>
  );
}

Route1 нужно отображать Outlet только в том случае, если это также маршрут макета. Outlet можно удалить, если это не так.

export default function Route1() {
  return (
    <>
      <h2>Route1</h2>
    </>
  );
}