Как настроить редирект?

Question

У меня есть компонент Switch

        <Switch>
            <Route path="/contacts" exact>
                <ContactsPage />
            </Route>
            <Route path="/add" exact>
                <AddContactForm />
            </Route>
            <Redirect to="/contacts" />
        </Switch>

Теперь, когда я go в / contacts / add, он перенаправляет меня в / contacts. Но мне нужно сделать редирект, только если ни один из маршрутов не верен. Так как это сделать?

Answer 1

Вам нужно написать весь маршрут, а не только / add -> / contact / add

<Switch>
  <Route path="/contacts/add" exact>
    <AddContactForm />
  </Route>
  <Route path="/contacts" exact>
    <ContactsPage />
  </Route>
  <Redirect to="/contacts" />
</Switch>

Или, если вы хотите разделить глобальный маршрутизатор на несколько небольших маршрутизаторов

// Router.js
<Switch>
  <Route path="/contacts"> // remove exact
    <ContactsPage />
  </Route>
  <Redirect to="/contacts" />
</Switch>

, тогда на странице контактов:

// ContactsPage.js
<Switch>
  <Route path="/contacts/add" exact>
    <AddContactForm />
  </Route>
  <Route path="/contacts" exact>
    <Contacts />
  </Route>
</Switch>