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

Question

C'est un objectif commun, de diriger unmatch demande à notfound page.

faire cela avec réagissent-routeur v4 ressemble à la version précédente et je m'attends à ce exemple ci-dessous. Les liens fonctionnent bien, mais j'attends NotFound composant appelé une seule inconnue de l'url demandée; mais elle 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>
    );
  }
}

son depuis path="*" représentent toutes les demandes et notfound composant toujours là, mais comment puis-je dire de cacher ce composant pour valide chemin d'accès d'url?

Answer 1

Réagir Routeur Aucun Match de la documentation couvre ce. Vous avez besoin d'importer de l' <Switch> composant, vous pouvez enlever le path attribut complètement.

Un <Switch> rend le premier enfant <Route> qui correspond. Un <Route> avec aucun chemin d'accès 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 suffit de déposer l' path="*" et d'introduire de l' <Switch>:

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

N'oubliez pas d'inclure Switch votre import énoncé dans la partie supérieure.

Answer 2

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.

Answer 3

Bien que l'accepter solution fournit la réponse, mais il ne fonctionne pas lorsque vous avez imbriqué des Routes

Par exemple, si l' Home de la composante a imbriquées Routes, comme /home, /dashboard et si l'url que vous avez consulté est - /db, ce serait montrer un NotFound seulement au sein de la section d'Itinéraire, mais pas la page dans son ensemble.

Pour éviter cela, vous pouvez aller de pair avec un très simple tweak de l'aide d'un composant et un Fournisseur de

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 à l'intérieur de la Maison de la composante

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

Answer 4

Il ne fonctionne pas pour moi, en particulier est l'utilisation de cette config

Donc, je dois vérifier le chemin d'accès dans la fonction rendu de la page d'Accueil de composant. Quelque chose comme ceci:

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