Комбинация боковой панели и вложенных маршрутов с использованием response-router-dom v4 / v5

Question

Я хочу реализовать несколько комбинаций вложенных маршрутов и маршрутов боковой панели в одном файле маршрутов. Я хочу, чтобы компоненты отображались следующим образом.

"/" --- Registration page
"/login" ---- Login Page
"/application" --- Application Page
"/dashboard" --- Dashboard page with Sidebar and Application components
"/dashboard/application" --- Dashboard page with Sidebar and Application components
"/dashboard/user" --- Dashboard page with Sidebar and User components

Мои настройки маршрутов настроены следующим образом

      <Switch>
        <Route path="/" component={withAuth(Registration)} />
        <Route path="/login" component={withAuth(Login)} />
        <Route path={'/dashboard'} component={withAuth(Dashboard)}/>        
      </Switch>

Внутри страницы панели инструментов я реализовал в основном боковую панель Пример с веб-сайта реакции-маршрутизатора-дом.

Работает нормально, однако я хочу поместить всю маршрутизацию в один файл.

Примерно так

<Switch>
  <Route path="/" component={withAuth(Registration)} />
  <Route path="/login" component={withAuth(Login)} />
  <Route path={'/dashboard'} component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
  <Route path="/dashboard/application" component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
  <Route path="/dashboard/user" component={withAuth(Dashboard)} children={[Sidebar, User]}/>
</Switch>

Приведенный выше код является вымышленным кодом, но он должен дать представление о том, чего я пытаюсь достичь. Я попытался найти решение по аналогичному вопросу , но у меня это не сработало.

Как поместить всю маршрутизацию в один файл и позаботиться о маршрутизации на боковой панели и вложенной маршрутизации вresponse-router-dom v4 / v5?

Я создал пример песочницы с кодом примера , попробуйте этот пример.

Answer 1

Хотя я думаю, что все ваши маршруты в одном файле стали антишаблоном, я думаю, что вы можете достичь чего-то достаточно близкого к тому, что вы ищете - в частности, чтобы все маршруты находились в одном файле.

Основная хитрость заключается в использовании переключателя, как обычный переключатель . Последний регистр в Switch становится регистром по умолчанию (или маршрутом).

Вам также необходимо использовать точный , поскольку без него он будет соответствовать URL / каждый раз. То же самое относится ко второму Switch внутри InternalRoutes. Если вы не включите exact, он будет соответствовать /dashboard каждый раз и никогда не достигнет /dashboard/application или dashboard/user. Вам все еще понадобится компонент Routes, чтобы обернуть его в компонент BrowserRouter.

import React from 'react';
import { Switch, Route } from 'react-router-dom';

const Routes = props => {
  return (
    <Switch>
      <Route exact path="/" component={withAuth(Registration)} />
      <Route exact path="/login" component={withAuth(Login)} />
      <Route component={withAuth(InternalRoutes)} />
    </Switch>
  );
};

const InternalRoutes = props => {
  return (
    <Switch>
    <Route exact path="/dashboard" component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
    <Route exact path="/dashboard/application" component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
    <Route exact path="/dashboard/user" component={withAuth(Dashboard)} children={[Sidebar, User]}/>
    <Route component={NotFoundComponent} />
  );
};

const NotFoundComponent = props => {
  return <div>URL Not Found</div>;
};

export default Routes;