小编典典

为什么我的组件在所有路径中都保持渲染?

reactjs

输入不存在的URL时,我尝试呈现组件。但是,该组件会在所有路径中保持渲染。我正在使用[email protected]。这是我设置的路线:

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;

我当前面临的问题是消息:更改URL时The page that you are looking is not there.,在//addelement路由上不断弹出。我很难使消息仅在未定义的路线上显示。最初,我尝试切换路线,并在顶部创建更“详细”的路线,如下所示:

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>
);

但是,它没有解决问题。有没有一种方法可以防止消息出现在我去的每条路由上(未定义的路由除外)?


阅读 256

收藏
2020-07-22

共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>多种方式将s
组合到我们的应用程序中,例如侧边栏和面包屑,引导程序标签等。

但是,有时我们只想选择一个<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>
2020-07-22