为什么我的组件会在所有路由中继续呈现？

Question

当我输入一个不存在的网址时，我正在尝试渲染一个组件。但是，组件会在所有路径中保持渲染。我正在使用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消息。我很难尝试只在我去一条未定义的路线时才显示该消息。最初，我尝试切换路线并制作更多详细的＆＃34;像这样的顶部路线：

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}/>

     

如果网址为/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>