Как сделать правильно Route для id и new?

Question

[ValeraNakhuy]

Я сделал это так:

<Route exact path={`${match.url}/`} component={List} />
          <Route exact path={`${match.url}/:id`} component={View} />
          <Route exact path={`${match.url}/new`} component={New} />

Но когда я перехожу на страницу c id я там вижу два компонента
И очевидно почему, потому что он считает new за id

Как это сделать красиво? Что бы работало?

Answer 1

[Антон Спирин]

<Switch>
  <Route exact path={`${match.url}/`} component={List} />
  <Route exact path={`${match.url}/new`} component={New} />
  <Route exact path={`${match.url}/:id`} component={View} />
</Switch>

Comments

[ValeraNakhuy]

Антон Спирин в таком случае на странице new я вижу 2 компонент

[Антон Спирин]

ValeraNakhuy, я не понимаю, что вы подразумеваете под "2 компонент", но в данном примере на роуте
`${match.url}/new` будет отрисован только компонент New.

Обратите внимание на компонент Switch. Рекомендую почитать документацию о его предназначении и принципе работы .

[ValeraNakhuy]

Да Switch помог, спасибо большое!