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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章