反应路由器：找不到路由？

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>
];

我有一个应用模板，一个HeaderTemboard，和参数化的路由集与相同的处理程序（在应用模板）。我希望在没有找到东西的时候能够服务404路线。例如， /CA/SanFrancisco应该由区域查找和处理，而 /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。此外，如果我向第一个路由配置添加了NotFoundRoad，则所有区域页404。

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

我做错了什么？

这里有一个要点可以下载并试用。

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

Answer 1

使用新版本的React路由器（现在使用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 2

在较新版本的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 component={NotFound}/>
    </Switch>
  </Router>
);

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

Answer 3

在反应路由器1.0.0中删除了DefaultLine和NotFoundRoad。

我想强调的是，带星号的默认路由必须是当前层次结构级别中的最后一个路由才能工作。否则，它将覆盖树中出现在它后面的所有其他路由，因为它是第一个路由，并且匹配每个路径。

对于react路由器1、2和3

如果您想显示404并保留路径（与NotFoundRoad相同的功能）

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

如果你想显示一个404页面，但更改网址（与默认路线相同的功能）

<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路由器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>

命令很重要！