Маршрутизатор React V4 отображает несколько маршрутов

Я создаю SPA, и я пытаюсь настроить маршрутизацию в приложении, используя react-router-dom пакета версии 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 и NotFound компонент при запросе /login страница.

С уважением

12
react-router react-router-dom reactjs

3 ответов

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

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>
19

использовать 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>

по словам docs

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

теперь, если мы в /login, <Switch> начнет искать соответствие <Route>. <Route path="/login"/> будет соответствовать и <Switch> перестанет искать спички и render <Login>. маршрут иначе спички /login С /login и * и отображает оба маршрута

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

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

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

0