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