routeur 4 réagissent - Nested commutateur fonctionne pas comme prévu

Question

app.js

<ConnectedRouter history={history}> 
    <Switch> 
     <Route path="/dashboard" name="Layout" component={Layout} /> 
     <Route exact path="/login" name="Login" component={Login} /> 
     <Redirect from="/" to="/dashboard" /> 
     <Route component={NoMatch}/> 
    </Switch> 
</ConnectedRouter> 

Layout.js

<Switch> 
    <Route path="/" name="Dashboard" component={Dashboard} /> 
    <Route path="/components/a" component={ComponentA} /> 
    <Route path="/components/b" component={ComponentB} /> 
</Switch> 

• Problèmes:
  • problème # 1 NAVIGUER pour '/dashboard/components/a 'ou'/dashboard/components/b 'n'affiche pas le composant a ou b comme prévu
  • problème # 2 naviguer mauvais chemin redirect toujours '/ tableau de bord' pas afficher le composant NoMatch

MISE À JOUR: changer Rediriger à <Route exact path='/' render={() => <Redirect to='/dashboard' />} /> peut résoudre le problème # 2 mais problème # 1 reste

Answer 1

Vous devrez peut-être changer votre chemin Route pour avoir un /dashboard param aussi bien quand vous Tyring pour accéder à /dashboard/componenets/a ou /dashboard/componenets/b

<Switch> 
    <Route exact path="/dashboard" name="Dashboard" component={Dashboard} /> 
    <Route path="/dashboard/components/a" component={ComponentA} /> 
    <Route path="/dashboard/components/b" component={ComponentB} /> 
</Switch>