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呈現多條路線

回答

相關問題