React-Router: Aucune route non trouvée?

Considérer ce qui suit:

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

J'ai un modèle d'application, un modèle d'en-tête et un ensemble de routes paramétrées avec le même gestionnaire (dans le modèle d'application). Je veux pouvoir desservir 404 routes lorsque quelque chose n'est pas trouvé. Par exemple, / CA / SanFrancisco doit être trouvé et géré par Area, alors que / SanFranciscoz doit être 404.

Voici comment je teste rapidement les itinéraires.

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

Le problème est que / SanFranciscoz est toujours géré par la page Area, mais je veux qu'il soit 404. De plus, si j'ajoute un NotFoundRoute à la première configuration d'itinéraire, toutes les pages Area 404.

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

Qu'est-ce que je fais mal?

Voici un résumé qui peut être téléchargé et expérimenté.

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

DefaultRoute et NotFoundRoute ont été supprimés dans react-router 1.0.0.

Je tiens à souligner que la route par défaut avec l'astérisque doit être la dernière du niveau de hiérarchie actuel pour fonctionner. Sinon, il remplacera toutes les autres routes qui apparaissent après lui dans l'arborescence car il est le premier et correspond à chaque chemin.

Pour react-router 1, 2 et 3

Si vous souhaitez afficher un 404 et conserver le chemin (même fonctionnalité que NotFoundRoute)

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

Si vous souhaitez afficher une page 404 mais changer l'url (même fonctionnalité que DefaultRoute)

<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />

Exemple avec plusieurs niveaux:

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

Pour react-router 4 et 5

Gardez le chemin

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

Rediriger vers une autre route (changer l'URL)

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

L'ordre compte!

Dans les versions plus récentes de react-router, vous souhaitez encapsuler les routes dans un Switch qui ne rend que le premier composant correspondant. Sinon, vous verriez plusieurs composants rendus.

Par exemple:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Switch
} from 'react-router-dom';

import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';

const Root = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/welcome" component={Welcome}/>
      <Route component={NotFound}/>
    </Switch>
  </Router>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

Avec la nouvelle version de React Router (qui utilise maintenant 2.0.1), vous pouvez utiliser un astérisque comme chemin pour acheminer tous les «autres chemins».

Cela ressemblerait donc à ceci:

<Route route="/" component={App}>
    <Route path=":area" component={Area}>
        <Route path=":city" component={City} />
        <Route path=":more-stuff" component={MoreStuff} />    
    </Route>
    <Route path="*" component={NotFoundRoute} />
</Route>

Cette réponse est pour react-router-4. Vous pouvez encapsuler toutes les routes dans le bloc Switch, qui fonctionne exactement comme l'expression de casse de commutation, et rend le composant avec la première route correspondante. par exemple)

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

Quand utiliser exact

Sans exact:

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

Avec exact:

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

Maintenant, si vous acceptez des paramètres de routage, et si cela s'avère incorrect, vous pouvez le gérer dans le composant cible lui-même. par exemple)

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

Maintenant dans ProfilePage.js

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

Pour plus de détails, vous pouvez passer par ce code:

App.js

ProfilePage.js

Selon la documentation , l'itinéraire a été trouvé, même si la ressource ne l'a pas été.

Remarque : Ceci n'est pas destiné à être utilisé lorsqu'une ressource n'est pas trouvée. Il existe une différence entre le routeur ne trouvant pas de chemin correspondant et une URL valide qui entraîne une ressource introuvable. L'url courses / 123 est une URL valide et aboutit à un itinéraire correspondant, donc elle a été "trouvée" en ce qui concerne le routage. Ensuite, si nous récupérons des données et découvrons que le cours 123 n'existe pas, nous ne voulons pas passer à un nouvel itinéraire. Tout comme sur le serveur, vous allez de l'avant et servez l'URL mais affichez une interface utilisateur différente (et utilisez un code d'état différent). Vous ne devriez jamais essayer de passer à un NotFoundRoute.

Ainsi, vous pouvez toujours ajouter une ligne dans l' Router.run()avant React.render()pour vérifier si la ressource est valide. HandlerPassez simplement un accessoire au composant ou remplacez le composant par un personnalisé pour afficher la vue NotFound.

Je viens de jeter un coup d'œil à votre exemple, mais si je l'ai bien compris, vous essayez d'ajouter 404 routes à des segments dynamiques. J'ai eu le même problème il y a quelques jours, j'ai trouvé # 458 et # 1103 et j'ai fini avec une vérification faite à la main dans la fonction de rendu:

if (!place) return <NotFound />;

J'espère que cela pourra aider!