Considere o seguinte:
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>
];
Eu tenho um modelo de aplicativo, um cabeçalho de modelo e um conjunto de rotas parametrizado com o mesmo manipulador (no modelo de aplicativo). Quero poder servir rotas 404 quando algo não for encontrado. Por exemplo, / CA / SanFrancisco deve ser encontrado e tratado por Área, enquanto / SanFranciscoz deve 404.
Veja como teste rapidamente as rotas.
['', '/', '/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');
});
});
O problema é que / SanFranciscoz está sempre sendo tratado pela página Área, mas quero que seja 404. Além disso, se eu adicionar um NotFoundRoute à primeira configuração de rota, todas as páginas Área 404.
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Page} />
<NotFoundRoute handler={NotFound} />
</Route>,
O que estou fazendo de errado?
Aqui está uma essência que pode ser baixada e testada.