Как правильно определить запасной маршрут в Reaction-router-DOM

Question

У меня есть следующее Router определение:

<Router>
    <Route exact path='/' component={Home}/>
    <Route path='/about' component={About}/>
    <Route path='/code' component={Code}/>
</Router>

Я хочу, чтобы любой не отображенный маршрут (т. Е. /foo) перенаправлял обратно в root /.

Я пытался <Redirect .../> без успеха.Кроме того, добавление <Route /> без path= привело к дублированию компонента на каждой странице.

Answer 1

Это необходимо сделать внутри компонента <Switch>.

// IMPORT

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from "react-router-dom";

---------- 
// USAGE

<Switch>
  <Route path="/" exact component={Home} />
  <Redirect from="/old-match" to="/will-match" />
  <Route path="/will-match" component={WillMatch} />
  <Route component={NoMatch} />
</Switch>

Как видно из Документов React Router .

Switch

Визуализация первого дочернего элемента <Route> или <Redirect>, который соответствует местоположению.

Чем это отличается от простого использования набора s?

<Switch> уникален тем, что он отображает маршрут исключительно.Напротив, каждый <Route>, который соответствует местоположению, рендерится включительно.Рассмотрим этот код:

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

Если URL-адрес / about, то <About>, <User> и <NoMatch> будут отображаться, поскольку все они соответствуют пути.Это сделано специально, что позволяет нам составлять <Route> s в наших приложениях различными способами, такими как боковые панели и хлебные крошки, вкладки начальной загрузки и т. Д.

Иногда, однако, мы хотим выбрать только один <Route> длявизуализации.Если мы находимся на / о, мы не хотим также сопоставлять /: пользователя (или показывать нашу страницу «404»).Вот как это сделать с помощью Switch:

import { Switch, Route } from 'react-router'

<Switch>
 <Route exact path="/" component={Home}/>
 <Route path="/about" component={About}/>
 <Route path="/:user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

Answer 2

Просто поместите редирект внизу, как это, и оберните ваши маршруты с Switch:

<Router>
    <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
        <Route path='/code' component={Code}/>

        // Redirect all 404's to home
        <Redirect to='/' />
    </Switch>
</Router>

Answer 3

<Router>
    <Switch>
        // ...your routes and then
        <Route path="*" render={() => <Redirect to="/" />}
    </Switch>
</Router>

Answer 4

Пожалуйста, добавьте маршрут по умолчанию внизу всех Routes (добавьте атрибут from для перенаправления)

<Router>
    <Route exact path='/' component={Home}/>
    <Route path='/about' component={About}/>
    <Route path='/code' component={Code}/>
    <Redirect from="/" />
</Router>

рабочая ссылка https://stackblitz.com/edit/react-st9nug?file=index.js