Réagir-Routeur: Non, Pas Trouvé La Route?

Dejakob réponse est bonne, DefaultRoute et NotFoundRoute ont été supprimées afin de réagir-routeur 1.0.0. Je voudrais souligner que la route par défaut avec l'astérisque a être le dernier dans le niveau actuel de la hiérarchie au travail. Sinon, il correspond à tous les itinéraires qui apparaissent dans l'arbre.

Pour réagir-routeur 1, 2 et 3

Si vous souhaitez afficher une erreur 404 et garder le chemin d'accès (Même fonctionnalité que NotFoundRoute)

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

Si vous souhaitez afficher une page d'erreur 404, mais modifier l'url (Même fonctionnalité que DefaultRoute)

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

Exemple avec de multiples 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 réagir-routeur 4

Garder le chemin d'accès

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

Rediriger vers une autre route (changement d'url)

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

Avec la nouvelle version de Réagir Routeur (à l'aide d'2.0.1 maintenant), vous pouvez utiliser un astérisque comme un chemin vers la route de tous les 'autres chemins.

Donc il devrait ressembler à 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 réagir-routeur-4.
Vous pouvez envelopper tous les itinéraires dans le bloc de commutateurs, qui fonctionne exactement comme le cas de commutateur d'expression, et rend le composant avec le premier correspondant à la route. 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. */}

Exacte:

<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 les paramètres de routage, et si il s'avère incorrect, vous pouvez le gérer dans le composant cible elle-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