为什么我的组件在所有路由中都保持渲染? [英] Why does my component keep rendering in all routes?

问题描述

当我输入一个不存在的 url 时，我试图呈现一个组件.但是，该组件会在所有路由中保持渲染.我正在使用 react-router-dom@4.1.1.这是我设置的路线:

I am attempting to render a component when I enter a url that does not exists. However, the component keeps rendering in all routes. I am using react-router-dom@4.1.1. This are the routes that I set up:

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;

我目前面临的问题是消息:您正在查看的页面不存在. 不断弹出 / 和 /addelement 当我更改 URL 时的路由.我很难让消息只在我去到一条未定义的路线时出现.最初，我尝试切换路线并在顶部制作更详细"的路线，如下所示:

The issue that I am currently facing is that the message: The page that you are looking is not there. keeps popping up on the / and /addelement route when I changed the URL. I am having a hard time trying to make the message appear only when I go to a route that is not defined. Initially, I tried to switch the routes and make the more "detailed" route at the top like this:

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

然而，它并没有解决问题.除了未定义的路线，有没有办法防止消息出现在我去的每条路线上?

However, it did not solve the issue. Is there a way to prevent the message from appearing on every route that I go to except for routes that are not defined?

推荐答案

你应该使用 组件.根据文档:

You should use a <Switch> component. Per the documentation:

的独特之处在于它独占渲染路由.相比之下，每个与位置匹配的 都inclusively.考虑以下代码:

How is this different than just using a bunch of <Route>s?

<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively. Consider this code:

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

如果 URL 是 /about，则 、 和 将全部渲染，因为它们都匹配路径.这是设计使然，允许我们以多种方式将 组合到我们的应用程序中，例如侧边栏和面包屑、引导标签等.

If the URL is /about, then <About>, <User>, and <NoMatch> will all render because they all match the path. This is by design, allowing us to compose <Route>s into our apps in many ways, like sidebars and breadcrumbs, bootstrap tabs, etc.

然而，有时我们只想选择一个 来渲染.如果我们在 /about，我们不想也匹配 /:user(或显示我们的404"页面).

Occasionally, however, we want to pick only one <Route> to render. If we’re at /about we don’t want to also match /:user (or show our "404" page).

因此，从 react-router-dom 导入:

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

然后像这样应用它(注意不需要path="*"):

Then apply it like so (note there is no need for path="*"):

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

这篇关于为什么我的组件在所有路由中都保持渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！