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

Question

[bormor]

По ссылке '/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>

Это корретно?

Answer 1

[0xD34F]

Как это можно исправить?

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

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

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

Документацию.

Answer 2

[Алексей Николаев]

Используйте exact, как вам уже подсказали, и это ничуть не топорно. У вас в динамическом роуте за :user принимался весь остаток url'a. Так что да, это корректно, только в первом роуте exact необязателен.