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

问题:

Consider the following:考虑以下:

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

I have an App Template, a HeaderTemplate, and Parameterized set of routes with the same handler (within App template).我有一个应用程序模板、一个 HeaderTemplate 和一组具有相同处理程序的参数化路由(在应用程序模板中)。 I want to be able to serve 404 routes when something is not found.当找不到某些东西时,我希望能够为 404 路由提供服务。 For example, /CA/SanFrancisco should be found and handled by Area, whereas /SanFranciscoz should 404.例如,/CA/SanFrancisco 应该由 Area 找到和处理,而 /SanFranciscoz 应该是 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, '\n');
    });
});

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.问题是 /SanFranciscoz 总是由 Area 页面处理,但我希望它是 404。此外,如果我将 NotFoundRoute 添加到第一个路由配置中,则所有 Area 页面都是 404。

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

What am I doing wrong?我究竟做错了什么?

Here's a gist that can be downloaded and experimented on.这是一个可以下载和试验的要点。

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


解决方案:

参考一: https://en.stackoom.com/question/2AoDK
参考二: https://stackoom.com/question/2AoDK
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章