web-dev-qa-db-fra.com

réagir page par défaut du routeur v4 (page non trouvée)

C'est un objectif commun, diriger la demande d'annulation de la correspondance vers la page non trouvée.

en faisant cela avec react-router v4 ressemble aux versions précédentes et je m'attends à ce que cet exemple fonctionne ci-dessous. Les liens fonctionnent bien, mais je suppose que le composant NotFound appelé uniquement l’URL inconnue est demandé; mais c'est toujours là.

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


class Layout extends Component {
  render() {
    return (
    <Router>
      <div className="App">
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user">User</Link></li>
        </ul>
        <Route exact path="/" component={Home}/>
        <Route path="/user" component={User}/>
        <Route path="*" component={Notfound}/>
      </div>
  </Router>
    );
  }
}

enter image description hereenter image description here

sa depuis path="*" représente toute la requête et le composant non trouvé toujours là, mais comment puis-je dire cacher ce composant pour le chemin d'URL valide?

reactjsreact-router
52
TyForHelpDude

Le routeur réagit aucune correspondance documentation couvre cela. Vous devez importer le composant <Switch>, puis vous pouvez supprimer complètement l'attribut path.

Un <Switch> restitue le premier enfant <Route> qui correspond. Un <Route> sans chemin correspond toujours

C'est l'exemple qui utilise:

<Router>
  <div>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <Route component={NoMatch}/>
    </Switch>
  </div>
</Router>

Donc, dans votre cas, il vous suffirait de déposer le path="*" et d’en introduire le <Switch>:

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={Notfound} />
</Switch>

N'oubliez pas d'inclure Switch dans votre déclaration import en haut.

118
James Donnelly

c'est ma solution avec deux composants.

const NotFound = () => <div>Not found</div>

const NotFoundRedirect = () => <Redirect to='/not-found' />

//root component
<Switch>
 <Route path='/users' component={UsersPages} />
 <Route path='/not-found' component={NotFound} />
 <Route component={NotFoundRedirect} />
</Switch>

//UsersPages component
<Switch>
 <Route path='/home' component={HomePage} />
 <Route path='/profile' component={ProfilePage} />
 <Route component={NotFoundRedirect} />
</Switch>

Ce travail est parfait pour moi. Merci.

4
Eduin Garcia Cordero

Bien que la solution accept donne la réponse, mais cela ne fonctionnerait pas si vous avez des routes imbriquées.

Par exemple, si le composant Home contient des itinéraires imbriqués tels que /home, /dashboard et si l'URL visitée est /db, elle affichera un composant NotFound au sein de la section Route, mais pas la page dans son ensemble.

Pour éviter cela, vous pouvez utiliser un Tweak très simple d'utilisation d'un composant et d'un fournisseur.

const NoMatch = (props) => (
    <Redirect to={{state: {noMatch: true}}} />
)

const ProviderHOC = (NotFoundRoute) => {
    const RouteProvider = (props) => {
        if(props.location && props.location.state && props.location.noMatch) {
           return  <NotFoundRoute {...props} />
        }
        return props.children;
    }
    return withRouter(RouteProvider)

}

export default ProviderHOC;

Et puis vous pouvez l'utiliser comme

const RouteManager  = ProviderHOC(NotFoundComponent);

<Router>
  <RouteManager>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <NoMatch />
    </Switch>
  </RouteManager>
</Router>

et dans la composante d'accueil

render() {
    return (
         <Switch>
               <Route path="/home" component={NewHome} />
               <Route path="/dashboard" component={Dashboard} />
               <NoMatch />
         </Switch>
    )
}
2
Shubham Khatri

Cela ne fonctionne pas pour moi, en particulier on utilise ceci config

Je dois donc vérifier le chemin dans la fonction de rendu du composant Homepage. Quelque chose comme ça:

render(){
const {match, location, history} = this.props;
if (location.pathname === '/'){
return (<div>Home</div>)
}else{
return null
}
}
0
Dat TT