React路由器v4呈现多条路线

我正在创建一个SPA，并且正在尝试使用react-router-dom程序包版本在应用程序中设置路由。React路由器v4呈现多条路线

我的路线定义如下：

<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页面时呈现Login和NotFound组件。

亲切的问候

来源

2017-05-16 Complexity

这里是从official tutorial一个例子，如何避免渲染多个路由

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>

来源

2017-05-16 07:04:15

利用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> 将停止查找匹配并呈现<Login>。否则路线比赛/login与/login和*并呈现两个途径

然而，使用开关将顺序事的时候，请确保您要添加的其他路线后前缀的路由信息。对于例如一个“/ home”必须是“/”在路线的顺序，或者以后，你可以利用exact道具

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

来源

2017-05-16 07:06:08

我觉得NOTFOUND页，是因为<Route path="*" component={NotFound} />规则的渲染。路由器的路径属性接受path-to-regexp可以理解的任何有效URL路径。所以'*'表示零个或多个参数匹配

来源

2017-05-16 07:07:51 Serg

React路由器v4呈现多条路线

回答

相关问题