Чтобы создать макет боковой панели для всех вложенных маршрутов /manageс помощью React Router v6, вы можете выполнить следующие шаги:

1. Настройте конфигурацию маршрутизации с помощью React Router v6. Определите свои маршруты и компоненты соответствующим образом. Вот пример:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
const App = () => {
  return (
    <Router>
      <Sidebar /> {/* Your sidebar component */}
      <Routes>
        <Route path="/manage" element={<ManagePage />} />
        <Route path="/manage/nested1" element={<Nested1Page />} />
        <Route path="/manage/nested2" element={<Nested2Page />} />
        {/* Add more nested routes as needed */}
      </Routes>
    </Router>
  );
};

2. Создайте компонент Боковая панель. Этот компонент будет отображаться в макете и будет содержать навигационные ссылки. Вы можете использовать перехватчик useRoutesиз React Router для извлечения вложенных маршрутов и динамического создания навигационных ссылок. Вот пример:

import { Link, useRoutes } from 'react-router-dom';
const Sidebar = () => {
  const routes = useRoutes();
  return (
    <div>
      <ul>
        {routes.map(route => (
          <li key={route.path}>
            <Link to={route.path}>{route.path}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

3. Реализуйте компоненты страницы (ManagePage, Nested1Page, Nested2Pageи т. д.) с нужным содержимым для каждого маршрута.

Выполнив эти шаги, вы получите макет боковой панели, который останется единообразным для всех вложенных маршрутов в /manage.