Почему мой компонент продолжает рендеринг на всех маршрутах?

Question

Я пытаюсь отобразить компонент, когда я ввожу URL, который не существует. Тем не менее, компонент продолжает рендеринг на всех маршрутах. я использую react-router-dom@4.1.1, Это маршруты, которые я настроил:

import * as React from "react";
import { Route, RouteComponentProps } from "react-router-dom";
import glamorous from "glamorous";
import ElementList from "./elementlist";
import AddElement from "./addelement";
import NotFound from "./NotFound";

const Styling = glamorous.div({
  minHeight: 5,
  minWidth: 8
});

const NavRouter = () => (
  <Styling>
    <Route path="/" exact={true} component={ElementList} />
    <Route path="/addelement" component={(props: 
       RouteComponentProps<{}>) => (
         <AddElement onSubmitSuccess={() => props.history.push("/")} />
       )} />
    <Route path="*" exact={true} component={NotFound}/>
  </Styling>
);

export default NavRouter;

Это мое NotFound составная часть:

import * as React from "react";


const NotFound = () => (
  <h1>The page that you are looking is not there.</h1>
);

export default NotFound;

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что сообщение: The page that you are looking is not there. продолжает выскакивать на / а также /addelement маршрут, когда я изменил URL. Я с трудом пытаюсь заставить сообщение появиться, только когда иду по маршруту, который не определен. Сначала я попытался переключить маршруты и сделать более "подробный" маршрут сверху:

const NavRouter = () => (
  <Styling>
    <Route path="/addelement" component={(props: 
       RouteComponentProps<{}>) => (
         <AddElement onSubmitSuccess={() => props.history.push("/")} />
       )} />
    <Route path="/" exact={true} component={ElementList} />
    <Route path="*" component={NotFound}/>
  </Styling>
);

Однако это не решило проблему. Есть ли способ предотвратить появление сообщения на каждом маршруте, по которому я иду, кроме маршрутов, которые не определены?

Answer 1

Вы должны использовать <Switch> составная часть. Согласно документации:

Чем это отличается от использования нескольких <Route> s?

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

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

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

Иногда, однако, мы хотим выбрать только один <Route> оказывать. Если мы в /about мы не хотим также соответствовать /:user (или покажите нашу страницу "404").

Таким образом, импортировать его из react-router-dom:

import { Route, RouteComponentProps, Switch } from 'react-router-dom';

Затем примените его так (обратите внимание, что нет необходимости path="*"):

<Switch>
  <Route path="/" exact={true} component={ElementList} />
  <Route path="/addelement" component={(props: 
     RouteComponentProps<{}>) => (
       <AddElement onSubmitSuccess={() => props.history.push("/")} />
     )} />
  <Route component={NotFound}/>
</Switch>