React Router v4 рендеринг компонента дважды

Question

Вот моя реализация маршрутизатора

<BrowserRouter>
  <div>
    <Route exact path="/" component={ProfilesIndex} />
    <Route exact path="/profiles" component={ProfilesIndex} />
    <Route exact path="/profiles/new" component={ProfileEditor} />
    <Route exact path="/profiles/:id" component={ProfileEditor} />
  </div>
</BrowserRouter>

Когда я просматриваю путь /profiles/new, он рендерит компонент ProfileEditor дважды. Для любого другого маршрута это работает нормально.

Может кто-нибудь подсказать, как решить эту проблему?

Answer 1

Я нашел ответ после просмотра нескольких разделов в Router Docs . Проблема была в том, что он совпадал с несколькими маршрутами

Когда пользователь открывает /profiles/new, он соответствует двум маршрутам

1. / маршруты / новый
2. / маршруты /: ID * +1011 *

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

Решение заключается в переносе маршрутов с помощью Switch, если вы не хотите сопоставлять несколько маршрутов.

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={ProfilesIndex} />
    <Route exact path="/profiles" component={ProfilesIndex} />
    <Route exact path="/profiles/new" component={ProfileEditor} />
    <Route exact path="/profiles/:id" component={ProfileEditor} />
  </Switch>
</BrowserRouter>