Как правильно сделать маршруты для id и новых?

Question

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

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

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

Как это сделать правильно?

Answer 1

Да, слово new считается id. С пути

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

показывает, что в заполнителе id ожидается динамическое значение. Поскольку id это просто заполнитель, использующий new в качестве параметров маршрута, он также будет удовлетворять условию.

Таким образом, вы можете обернуть компонент Routes компонентом Switch и, наконец, сохранить заполнитель Route с id. Поскольку Switch компонент отображает только первый дочерний элемент, который соответствует пути, поэтому компонент View не будет отображаться при использовании /new.

<Switch>
   <Route path={`${match.path}/`} component={List} />
   <Route exact path={`${match.url}/new`} component={New} />
   // place route with "id" at last
   <Route exact path={`${match.url}/:id`} component={View} />
</Switch>