React-Router：找不到路由？

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>

];

我有一个具有相同处理程序的App模板，HeaderTemplate和参数化路由集（在App模板内）。我希望能够在找不到某些内容时提供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