React-Router：沒有找不到路由？

Question

考慮以下幾點：

var AppRoutes = [ 
    <Route handler={App} someProp="defaultProp"> 
     <Route path="/" handler={Page} /> 
    </Route>, 

    <Route handler={App} someProp="defaultProp"> 
     <Route path="/" handler={Header} > 
      <Route path="/withheader" handler={Page} /> 
     </Route> 
    </Route>, 

    <Route handler={App} someProp="defaultProp"> 
     <Route path=":area" handler={Area} /> 
     <Route path=":area/:city" handler={Area} /> 
     <Route path=":area/:city/:locale" handler={Area} /> 
     <Route path=":area/:city/:locale/:type" handler={Area} /> 
    </Route> 
]; 

我有一個應用程序模板，一個HeaderTemplate中，並且參數組具有相同的處理路線（應用程序模板內）。我希望能夠在找不到東西時提供404條路線。例如，/ CA/SanFrancisco應該被Area找到和處理，而/ SanFranciscoz應該是404。

下面是我如何快速測試路線。

['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){ 
    Router.run(AppRoutes, path, function(Handler, state){ 
     var output = React.renderToString(<Handler/>); 
     console.log(output, '\n'); 
    }); 
}); 

的問題/ SanFranciscoz總是由區頁面處理，但我希望它404。另外，如果我加入NotFoundRoute到第一路由配置，所有的區域頁面404

<Route handler={App} someProp="defaultProp"> 
    <Route path="/" handler={Page} /> 
    <NotFoundRoute handler={NotFound} /> 
</Route>, 

我在做什麼錯？

這裏有一個可以下載和試驗的要點。

https://gist.github.com/adjavaherian/aa48e78279acddc25315

Answer 1

Dejakob的答案是正確的，DefaultRoute和NotFoundRoute除去在反應路由器1.0.0。我想強調的是，帶有星號的默認路由必須在當前層次結構級別上最後才起作用。否則，它將匹配樹中出現在其後面的所有路由。

對於反應路由器1,2和3

如果要顯示404和保持路徑（功能相同NotFoundRoute）

<Route path='*' exact={true} component={My404Component} /> 

如果要顯示404頁但更改網址（與DefaultRoute功能相同）

<Route path='/404' component={My404Component} /> 
<Redirect from='*' to='/404' /> 

實施例具有多個層次：

<Route path='/' component={Layout} /> 
    <IndexRoute component={MyComponent} /> 
    <Route path='/users' component={MyComponent}> 
     <Route path='user/:id' component={MyComponent} /> 
     <Route path='*' component={UsersNotFound} /> 
    </Route> 
    <Route path='/settings' component={MyComponent} /> 
    <Route path='*' exact={true} component={GenericNotFound} /> 
</Route> 

對於反應路由器4

保持路徑

<Switch> 
    <Route exact path="/" component={MyComponent} /> 
    <Route component={GenericNotFound} /> 
</Switch> 

重定向到另一路由（改變URL）

<Switch> 
    <Route path="/users" component={MyComponent} /> 
    <Redirect to="/404" /> 
</Switch> 

Answer 2

我剛剛有了一個快速瀏覽一下你的榜樣，但如果我的理解是正確的方式你要404個路由添加到動態段。我有同樣的問題一個前兩天，發現#458和#1103和渲染函數中結束了一個手工製作的檢查：

if (!place) return <NotFound />; 

希望幫助！

Answer 3

根據documentation，發現路線「was」，即使資源不是。

注意：這不是用於當找不到資源時。沒有找到匹配路徑的路由器和導致資源未找到的有效URL之間存在差異。 url courses/123是一個有效的url，併產生匹配的路由，因此就路由而言它是「被發現的」。然後，如果我們獲取一些數據並發現課程123不存在，我們不想轉換到新路線。就像在服務器上一樣，您繼續爲URL提供服務，但呈現不同的UI（並使用不同的狀態代碼）。你不應該嘗試過渡到NotFoundRoute。

因此，您可以在React.render()之前始終在Router.run()中添加一行以檢查資源是否有效。只需將一個道具傳遞給組件或使用自定義組件覆蓋Handler組件以顯示NotFound視圖。

Answer 4

使用新版本的React Router（現在使用2.0.1），可以使用星號作爲路徑來路由所有「其他路徑」。

因此，這將是這樣的：

<Route route="/" component={App}> 
    <Route path=":area" component={Area}> 
     <Route path=":city" component={City} /> 
     <Route path=":more-stuff" component={MoreStuff} />  
    </Route> 
    <Route path="*" component={NotFoundRoute} /> 
</Route> 

Answer 5

較新您想要的wrap the routes in a Switch版本的react-router只顯示第一個匹配的組件。否則，你會看到多個組件呈現。

例如：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
    BrowserRouter as Router, 
    Route, 
    browserHistory, 
    Switch 
} from 'react-router-dom'; 

import App from './app/App'; 
import Welcome from './app/Welcome'; 
import NotFound from './app/NotFound'; 

const Root =() => (
    <Router history={browserHistory}> 
    <Switch> 
     <Route exact path="/" component={App}/> 
     <Route path="/welcome" component={Welcome}/> 
     <Route path="*" component={NotFound}/> 
    </Switch> 
    </Router> 
); 

ReactDOM.render(
    <Root/>, 
    document.getElementById('root') 
);