Как создать несколько вложенных маршрутов для страниц Front и admin

Question

У меня проблема с маршрутизацией для передней части сайта и раздела администрирования. Мой код выглядит следующим образом: App.js

 class App extends Component {
  render() {
    return (
      <>
        <BrowserRouter>
          <Router />
        </BrowserRouter>
      </>
    );
  }
}

Router.js

const Router = () => (
  <>
    <Switch>
      <Home>
        <Route
          component={({ match }) => (
            <div>
              <Route exact path="/" component={Main} />
              <Route exact path="/read" component={Read} />
              <Route exact path="/post" component={Posts} />
              <Route exact path="/user" component={Users} />
              <Route exact path="/signup" component={Signup} />
              <Route exact path="/login" component={Login} />
              <Route exact path="/post/:id" component={Post} />
              <Route exact path="/forgot-password" component={ForgotPassword} />
            </div>
          )}
        />
      </Home>
      {/*Admin dashboard*/}
      <Dashboard>
        <Route
          component={({ match }) => (
            <div>
              <Route exact path="/admin" component={MainDashboard} />
              <Route exact path="/admin/post" component={PostManage} />
              <Route exact path="/admin/user" component={UserManage} />
            </div>
          )}
        />
      </Dashboard>
      <Route component={NoMatchPage} />
    </Switch>
  </>
);


export default Router;

Панель инструментов. js

const Dashboard = props => {
  return (
    <div>
      <Sidebar />
      {props.children}
    </div>
  );
};
export default Dashboard;

Я хочу реализовать так, чтобы Home и Dashboard имели разную маршрутизацию. Но когда я использую этот код, он может маршрутизировать только вложенные маршруты Home, т.е. / read, / post работают нормально. Но / admin, / admin / post не отображаются.

Answer 1

Вы сделали все маршруты "точными", что создает проблемы для вас. Вы должны сделать родителя просто "path".

Например:

Удалить "точный" с

<Route path="/admin" component={MainDashboard} />

и ваши вложенные маршруты администратора начнут работать.