React-Router:没有未找到的路由? [英] React-Router: No Not Found Route?

问题描述

考虑以下事项:

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.

I have an App Template, a HeaderTemplate, and Parameterized set of routes with the same handler (within App template). I want to be able to serve 404 routes when something is not found. For example, /CA/SanFrancisco should be found and handled by Area, whereas /SanFranciscoz should 404.

这是我快速测试路线的方法.

Here's how I quickly test the routes.

['', '/', '/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, '
');
    });
});

问题是/SanFranciscoz 总是由 Area 页面处理，但我希望它是 404.此外，如果我将 NotFoundRoute 添加到第一个路由配置中，则所有 Area 页面都是 404.

The problem is /SanFranciscoz is always being handled by the Area page, but I want it to 404. Also, if I add a NotFoundRoute to the first route configuration, all the Area pages 404.

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

我做错了什么?

这是一个可以下载和试验的要点.

Here's a gist that can be downloaded and experimented on.

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

推荐答案

DefaultRoute 和 NotFoundRoute 在 react-router 1.0.0 中被移除.

DefaultRoute and NotFoundRoute were removed in react-router 1.0.0.

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

I'd like to emphasize that the default route with the asterisk has to be last in the current hierarchy level to work. Otherwise it will override all other routes that appear after it in the tree because it's first and matches every path.

对于 react-router 1、2 和 3

如果您想显示 404 并保留路径(与 NotFoundRoute 功能相同)

If you want to display a 404 and keep the path (Same functionality as NotFoundRoute)

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

如果您想显示 404 页面但更改网址(与 DefaultRoute 功能相同)

If you want to display a 404 page but change the url (Same functionality as 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>

重定向到另一条路线(更改网址)

Redirect to another route (change url)

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

顺序很重要！

这篇关于React-Router:没有未找到的路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！