@bormor

Вложенные роуты в React Router 4. По ссылке 'user1/commit1' срабатывает компонент для 'user1/'. Как это можно сделать корретно?

По ссылке '/user1/commit1' срабатывает компонент для '/user1/', а не для 'user1/commit1/'

Сниппет кода:
<Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/:user" component={UserPage} />
        <Route path="/:user/:commit" component={CommitPage} />
</Switch>

Простой пример:
sandbox.io

Как это можно исправить?
Что стоит изучить, чтоб разобраться в вопросе?


UPD:
Первое топорное решение:
<Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/:user" component={UserPage} />
        <Route path="/:user/:commit" component={CommitPage} />
</Switch>

Это корретно?
  • Вопрос задан
  • 1420 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега React
Как это можно исправить?

Добавить exact - вижу, это вы и сами сообразили. Ещё можно изменить порядок роутов (рендерится первый подходящий):

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/:user/:commit" component={CommitPage} />
  <Route path="/:user" component={UserPage} />
</Switch>

Что стоит изучить, чтоб разобраться в вопросе?

Документацию.
Ответ написан
Комментировать
Используйте exact, как вам уже подсказали, и это ничуть не топорно. У вас в динамическом роуте за :user принимался весь остаток url'a. Так что да, это корректно, только в первом роуте exact необязателен.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы