Как переключаться между дочерними маршрутами?

Question

Я вижу свой компонент ProjectListContainer, когда открываю / проекты. Но вложенные ссылки не работают (/ projects / create). Как я могу решить это? Мне также нужно переключить вложенные компоненты.

Это мой маршрутизатор:

<BrowserRouter>
    <Switch>
        <Route path="/" exact component={Home} />
        <RestrictedRouter path="/login" component={Login} />
        <PrivateRoute path="/logout" component={Logout} />
        <PrivateRoute path="/projects" component={Projects} />
    </Switch>
</BrowserRouter>

Это мой компонент с вложенным переключателем:

<div className={classes.content}>
    <Switch>
        <Route path={`${match.path}`} component={ProjectsListContainer} />
        <Route path={`${match.path}/create`} component={CreateProject} />
        <Route path={`${match.path}/:id`} component={Kanban} />
    </Switch>
</div>

Answer 1

попробуйте

<div className={classes.content}>

        <Route exact path={`${match.path}`} component={ProjectsListContainer} />
        <Route exact path={`${match.path}/create`} component={CreateProject} />
        <Route exact path={`${match.path}/:id`} component={Kanban} />
</div>

Answer 2

Попробуйте вот так

    return (
    <div className={classes.content}>
          <Route path={`${match.path}`} component={ProjectsListContainer} />
          <Route path={`${match.path}/create`} component={CreateProject} />
          <Route path={`${match.path}/:id`} component={Kanban} />
     </div>);

то есть без Switch.

или используйте useRouteMatch https://reacttraining.com/react-router/web/example/nesting

или Попробуйте

     let { path, url } = useRouteMatch();
     <div className={classes.content}>
          <Route path={`${url}`} component={ProjectsListContainer} />
          <Route path={`${url}/create`} component={CreateProject} />
          <Route path={`${url}/:id`} component={Kanban} />
     </div>

Помогает ли выше?