React Router v4 предоставляет несколько маршрутов

Я создаю SPA, и я пытаюсь настроить Routing в приложении, используя версию react-router-dom package 4.1.1.

Определение моего маршрута ниже:

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </div>
</BrowserRouter>

В принципе, я хочу настроить маршрутизацию, чтобы любой запрос на страницу, для которой не определен маршрут, переходит в компонент {NotFound}.

Как это можно достичь? При выполнении запроса на странице /login приведенное выше решение предоставляет как Login, так и NotFound.

С уважением

Ответ 1

вот пример из официального учебника, как избежать рендеринга нескольких маршрутов

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>

Ответ 2

Использовать Switch для рендеринга первого совпадения маршрута. Вам нужно импортировать Switch перед использованием

import {Switch} from 'react-router';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </Switch>
</BrowserRouter>

Согласно документам

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

Теперь, если вы находитесь в /login, <Switch> начнет поиск подходящего <Route>. <Route path="/login"/> будет соответствовать, и <Switch> прекратит поиск совпадений и отобразит <Login>. в противном случае направляйте совпадения /login с помощью /login и * и визуализируйте оба маршрута

Однако при использовании Switch порядок маршрутов имеет значение, убедитесь, что вы добавляете префиксы Routes после других Routes. Например, "/home" должно быть после "/" в порядке маршрута, иначе вы можете использовать exact опору

 <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/home" component={Home} />
  </Switch>

Ответ 3

Я думаю, что страница NotFound отображается из-за правила <Route path="*" component={NotFound} />. Свойство Path для маршрутизатора принимает Любой допустимый URL-путь, который понимает путь к regexp. Итак, '*' означает, что нулевой или более параметр соответствует