Реализация множественной маршрутизации в React

Question

Я хочу реализовать два макета: один - компонент входа в систему, а другой - компонент панели мониторинга. Оба имеют разные макеты.

Итак, в приложении. js, у меня есть основная маршрутизация в Switch, например: "/" "/ sign-up" "/ Forgot-Password" "/ Dashboard"

Теперь в «/ dashboard» у меня есть Dashboard Component, в котором есть другой компонент маршрутизации внутри коммутатора. Но здесь, это происходит прямо сейчас. "/ dashboard / library" "/ dashboard / media"

Поэтому, если я хочу go к компоненту библиотеки, который является дочерним компонентом Dashboard, URL-адрес становится "/ dashboard / library"

Как сделать URL только для "/ library". Есть что-то, чего мне не хватает или я неправильно это реализую?

Будем благодарны за любые предложения.

Answer 1

Я справляюсь с такими ситуациями, возлагая ответственность за маршрутизацию на маршрутизатор Dashboard без какого-либо пути.
вот так:

<Switch>
   <Route exact path={"/"} render={() => <h1>home</h1>} />
   <Route exact path={"/login"} render={() => <h1>login</h1>} />
   <DashboardRouter />
</Switch>

просто не забудьте страницу 404 в DashboardRouter
полный пример:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
const DashboardRouter = () => {
  return (
    <Switch>
      <Route path={"/dashboard"} render={() => <h1>dashboard</h1>} />
      <Route path={"/library"} render={() => <h1>library</h1>} />
      <Route render={() => <h1>Not Found</h1>} />

    </Switch>
  );
};

export default function App() {
  return (
    <Router>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <Link to={"/"}>home</Link>
        <Link to={"/login"}>login</Link>
        <Link to={"/dashboard"}>dashboard</Link>
        <Link to={"/library"}>library</Link>
        <Link to={"/not-found"}>not found</Link>
      </div>
      <Switch>
        <Route exact path={"/"} render={() => <h1>home</h1>} />
        <Route exact path={"/login"} render={() => <h1>login</h1>} />
        <DashboardRouter />
      </Switch>
    </Router>
  );
}

Вы также можете найти живую версию кода в песочнице кода:
https://codesandbox.io/s/dashboard-router-wkjkx?file= / src / App. js
пожалуйста, дайте мне знать, если у вас все еще есть проблемы