web-dev-qa-db-fra.com

Est-il possible d'avoir plusieurs <Switch> dans React.js?

Je construis un projet React sans Redux.

J'aimerais en avoir deux, ou dans ce cas 3 commutateurs différents

Le 1er commutateur sera en mesure de basculer entre la page d'accueil (site Web normal) et la page utilisateur (tableau de bord) lorsque l'utilisateur est connecté ... Ensuite, chacun sera également des commutateurs, donc la maison basculera entre les composants de la maison et la page utilisateur basculera entre Composants UserPage. Est-ce seulement possible?

                        Main Switcher 
     Home Page (Switch)              Dashboard
Home About Contact, Careers     My Profile, Courses, Classes, Donations...

C'est ainsi que le projet devrait ressembler et devrait être structuré.

javascriptreactjsreact-routerreact-router-v4
9
Amel Amcë Muminovic

Vous pouvez utiliser autant de composants Switch que vous le souhaitez. Il rend simplement la première correspondance de toutes les routes spécifiées en dessous.

Quelque chose dans ce sens devrait fonctionner, dans votre cas:

const Home = ({match}) => {
  return(
    <Switch>
      <Route path={match.url} exact={true} component={HomeDefaultComponent} />
      <Route path=`${match.url}/about` exact={true} component={About} />
      <Route path=`${match.url}/contact` exact={true} component={Contact} />
      <Route path=`${match.url}/careers` exact={true} component={careers} />
    </Switch>
  );
};

const Dashboard = ({match}) => {
  return(
    <Switch>
      <Route path={match.url} exact={true} component={DashboardDefaultComponent} />
      ... other Dashboard paths like Home component above
    </Switch>
  );
};

const App = () => {
  return(
    <Switch>
      <Route path='/home' component={Home} />
      <Route path='/dashboard' component={Dashboard} />
    </Switch>
  );
}
17
Shishir