React router: route рендерит два компонента

Question

У меня в приложении реакции есть следующие маршруты:

<Route exact path="/" component={HomeScreen} />
<Route exact path="/:category" component={HomeScreen} />
<Route exact path="/:category/:id" component={PostDetailScreen} />
<Route exact path="/posts/new" component={CreatePostScreen} />

Когда я захожу в / posts / new, мое приложение отображает не только CreatePostScreen, но и PostDetailScreen. Я думаю, что это интерпретирует: category = posts и: id = new.

Однако я застрял. Что я делаю неправильно? Я просто хочу, чтобы / posts / new route отображал CreatePostScreen.

Answer 1

Попробуйте это

<Switch>
  <Route exact path="/" component={HomeScreen} />
  <Route exact path="/posts/new" component={CreatePostScreen} />
  <Route exact path="/:category" component={HomeScreen} />
  <Route exact path="/:category/:id" component={PostDetailScreen} />
</Switch>

/posts/new является допустимым путем, который удовлетворяет /:category/:id, т.е. ваша категория posts идентификатор new

При размещении маршрутов в <Switch> отображается первый подходящий, подробнее здесь https://reacttraining.com/react-router/web/api/Switch

Answer 2

Маршрутизатор React интерпретирует «сообщения» как категорию, а «новые» - как идентификатор.

Измените порядок компонентов Route и используйте компонент Switch , например:

<Switch>
    <Route exact path="/" component={HomeScreen} />
    <Route exact path="/posts/new" component={CreatePostScreen} />
    <Route exact path="/:category" component={HomeScreen} />
    <Route exact path="/:category/:id" component={PostDetailScreen} />
</Switch>