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

小编典典

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

all

考虑以下：

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

阅读 135

2022-07-17

共1个答案

小编典典

在 react-router 1.0.0 中删除了 DefaultRoute 和 NotFoundRoute。

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

对于反应路由器 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>

对于反应路由器 4 和 5

保持路径

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

重定向到另一条路线（更改网址）

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

顺序很重要！

2022-07-17