React-router - Rediriger sur la charge?

Question

Je suis nouveau à React développement et je ne sais pas comment gérer cela.

J'ai une application simple avec les routes, il ressemble à ceci:

<Router> 
    <div> 
     <Route path="/" component={MainComponent} /> 
     <Route path="/dashboard" component={DashboardComponent} /> 
     <Route path="/users" component={UsersComponent} /> 
     <Route path="/admin" component={AdminComponent} /> 
    </div> 
</Router> 

Quand je vais à localhost: 3000/myApp/index.html mes MainComponent charges comme prévu, il détient la mise en page principale du site , navigation et ainsi de suite.

Ensuite, je dois cliquer sur « Dashboard » pour passer DashboardComponent, les « utilisateurs » de passer à UsersComponent et « Admin » pour charger AdminComponent, ceux-ci sont chargés à côté de la navigation à partir MainComponent.

Il va comme ceci:

localhost:3000/myApp = MainComponent 
localhost:3000/dashboard = MainComponent + DashboardComponent 
localhost:3000/users = MainComponent + UsersComponent 
localhost:3000/admin = MainComponent + AdminComponent 

Ce que je veux atteindre est de ne jamais charger MainComponent seul (car il ne tient rien de navigation excepté), mais la charge DashboardComponent avec lui, donc tout fonctionnera comme avant avec un léger changement:

localhost:3000/myApp = MainComponent + DashboardComponent 

Donc je suppose que je veux charger mon MainComponent, puis le tableau de bord sur init. Ce serait très bien si l'URL changeait automagiquement d'index.html à/dashboard aussi.

J'ai essayé de faire quelque chose comme ça dans mon MainComponent.jsx:

componentWillMount() { 
    <Redirect to="/dashboard" /> 
    console.log("It works!"); 
} 

Mais il ne fait rien, je pense que le routeur de premier exemple Application.jsx remplace simplement.

Je pense que je pourrais faire quelque chose de mal parce que j'ai l'impression que c'est l'une des choses les plus élémentaires avec le routeur mais je ne trouve aucune réponse et rien dans la documentation qui m'aiderait ici. Des indices?

tl; dr Je veux localhost:3000/myApp/index.html pour me rediriger localhost:3000/dashboard lorsque l'application démarre (je pense que cela devrait suffire pour que le routeur charge le bon composant).

reroutage ne fait rien (il n'y a pas d'erreurs, mais la route ne change pas):

<Router> 
     <div> 
      <Route path="/" component={MainComponent} /> 
      <Route path="/dashboard" component={DashboardComponent} /> 
      <Route path="/users" component={UsersComponent} /> 
      <Route path="/admin" component={AdminComponent} /> 
      <Route exact path="/" component={() => <Redirect to={DashboardComponent} /> } /> 
     </div> 
    </Router> 

Answer 1

Vous devriez envelopper vos itinéraires avec le MainComponent et l'envelopper dans Switch et permettre '/' montrer DashboardComponent

<Router history={history}> 
    <MainComponent> 
    <Switch> 
     <Route exact path="/" component={DashboardComponent} /> 
     <Route exact path="/dashboard" component={DashboardComponent} /> 
     <Route exact path="/users" component={UsersComponent} /> 
     <Route exact path="/admin" component={AdminComponent} /> 
    </Switch> 
    </MainComponent> 
</Router> 

Ou si vous ne voulez pas '/' pour afficher le tableau de bord, alors vous utiliserez Redirect:

<Router history={history}> 
    <MainComponent> 
    <Switch> 
     <Redirect exact from="/" to="/dashboard" /> 
     <Route exact path="/dashboard" component={DashboardComponent} /> 
     <Route exact path="/users" component={UsersComponent} /> 
     <Route exact path="/admin" component={AdminComponent} /> 
    </Switch> 
    </MainComponent> 
</Router> 

S'il vous plaît Note: Vous aurez besoin de mettre this.props.children dans la méthode render de MainComponent.

---

Sinon, vous pouvez mettre le <Switch>...</Switch> dans votre MainComponent:

Router

<Router history={history}> 
    <Switch> 
    <Redirect exact from="/" to="/dashboard" /> 
    <MainComponent /> 
    </Switch> 
</Router> 

MainComponent

class MainComponent extends React.Component { 
    ... 

    render() { 

     return <span> 
      //Navigation content here.... 

     <Switch> 
      <Route exact path="/dashboard" component={DashboardComponent} /> 
      <Route exact path="/users" component={UsersComponent} /> 
      <Route exact path="/admin" component={AdminComponent} /> 
     </Switch> 
     </span> 

    } 

} 

Liens utiles:

• Switch: https://reacttraining.com/react-router/web/api/Switch
• Redirect: https://reacttraining.com/react-router/web/api/Redirect