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>
];
我有一个 App 模板、一个 HeaderTemplate 和一组具有相同处理程序的参数化路由（在 App 模板内）。我希望能够在未找到某些内容时提供 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 始终由 Area 页面处理，但我希望它 404。此外，如果我将 NotFoundRoute 添加到第一个路由配置，则所有 Area 页面都会 404。
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Page} />
<NotFoundRoute handler={NotFound} />
</Route>,
我做错了什么？
这里有一个可以下载并进行实验的要点。
DefaultRoute 和 NotFoundRoute 在 react-router 1.0.0 中被删除。
我想强调的是，带有星号的默认路由 必须位于当前层次结构级别中的最后一个 才能起作用。否则，它将覆盖树中出现在它之后的所有其他路由，因为它是第一个并且与每个路径匹配。
对于 react-router 1、2 和 3
如果您想显示 404 并 保留路径 （与 NotFoundRoute 相同的功能）
<Route path='*' exact={true} component={My404Component} />
如果您想显示 404 页面但 更改 url （与 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>
对于 react-router 4 和 5
保留路径
<Switch>
<Route exact path="/users" component={MyComponent} />
<Route component={GenericNotFound} />
</Switch>
重定向到另一条路线（更改url)
<Switch>
<Route path="/users" component={MyComponent} />
<Route path="/404" component={GenericNotFound} />
<Redirect to="/404" />
</Switch>
顺序很重要！
在较新版本的 react-router 中，您需要 将路由包装在 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 component={NotFound}/>
</Switch>
</Router>
);
ReactDOM.render(
<Root/>,
document.getElementById('root')
);
使用新版本的 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>