React-Router：没有找不到路由？
考虑以下：
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。
以下是我如何快速testing路线。
['', '/', '/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总是由Area页面处理，但是我想要它到404。另外，如果我添加一个NotFoundRoute到第一个路由configuration，所有的Area页面404。
<Route handler={App} someProp="defaultProp"> <Route path="/" handler={Page} /> <NotFoundRoute handler={NotFound} /> </Route>,
我究竟做错了什么？
这是一个可以下载和试验的要点。
https://gist.github.com/adjavaherian/aa48e78279acddc25315
Dejakob的答案是正确的，DefaultRoute和NotFoundRoute在react-router 1.0.0中被删除。 我想强调的是，带有星号的默认路由必须在当前层次结构级别上工作。 否则，它将匹配所有在树中出现的路由。
对于反应路由器1,2和3
如果你想显示一个404并保持path （与NotFoundRoute相同的function）
<Route path='*' exact={true} component={My404Component} />
如果你想显示一个404页面，但改变URL （与DefaultRoute相同的function）
<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
保持path
<Switch> <Route exact path="/" component={MyComponent} /> <Route component={GenericNotFound} /> </Switch>
redirect到另一个路线（更改url）
<Switch> <Route path="/users" component={MyComponent} /> <Redirect to="/404" /> </Switch>
使用新版本的React Router（现在使用2.0.1），您可以使用星号作为path来路由所有“其他path”。
所以它看起来像这样：
<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>
在反应路由器的新版本中，您希望将路由包装在仅显示第一个匹配组件的Switch中。 否则，你会看到多个组件呈现。
例如：
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') );
根据该文件 ，即使资源不存在，也find“已被”的路线。
注意 ：这不是用于找不到资源的情况。 路由器找不到匹配的path和有效的URL导致找不到资源是有区别的。 url courses / 123是一个有效的url，并且得到一个匹配的路由，因此就路由而言，它是“被发现的”。 然后，如果我们获取一些数据并发现123不存在，我们不想转换到新的路线。 就像在服务器上，你继续前进，并提供url，但呈现不同的用户界面（并使用不同的状态码）。 您不应该尝试过渡到NotFoundRoute。
所以，你可以在Router.run()之前在React.render()添加一行来检查资源是否有效。 只需将一个道具传递给组件，或者使用自定义组件重写Handler组件，以显示NotFound视图。
我只是简单地看了一下你的例子，但是如果我理解了你正在尝试向dynamic段添加404路由的正确方法。 几天前我也遇到过同样的问题，发现＃458和＃1103 ，最后在渲染函数中进行了手工检查：
if (!place) return <NotFound />;
希望有所帮助！
