Установка относительного пути в React Router

Question

Есть ли способ сократить длину пути при прохождении маршрутов через компоненты в React Router?Например, в App.js:

<Switch>
  <Route exact path="/" component={Landing} />
  <Route exact path="/login" component={Login} />
  <PrivateRoute path="/main" component={Main} />
  <Route component={NotFound} />
</Switch>

И в Main.js компоненте:

<Switch>
    <Route exact path="/main" component={Dashboard} />
    <Route exact path="/main/users" component={Users} />
</Switch>

Можно ли как-то пропустить добавление /main перед /main/users каждый раз, когда я нахожусь вMain компонент?Может ли /main быть установлен на / внутри этого компонента, или мне приходится каждый раз явно набирать полный путь?

Я вижу обсуждения, говорящие о чем-то очень похожем (например: Реагирует лиМаршрутизатор поддерживает относительные ссылки? ), но есть ли что-нибудь для Router paths , которое можно настроить?Говорят, что <Link to="users" /> работает, но я не могу <Route path="users" /> получить.

Answer 1

В react-router нет «магии», которая автоматически вводит текущее местоположение, но вы можете сделать это довольно легко, используя this.props.location, который передается компоненту из <Router />:

.если вы уже находитесь на /main, вы можете установить следующие пути:

<Switch>
  <Route exact path={`${this.props.location.pathname}`} component={Dashboard} />
  <Route exact path={`${this.props.location.pathname}/users`} component={Users} />
</Switch>

, которые будут разрешаться как:

<Switch>
  <Route exact path="/main" component={Dashboard} />
  <Route exact path="/main/users" component={Users} />
</Switch>