Is it possible to have multiple in React.js?

Question

I am building a React project without Redux.

I would love to have two, or in this case 3 different Switches

1st Switch will be able to Switch between Home page (normal website) and UserPage (Dashboard) when user is logged in... Then each of this will be Switchers as well, so Home will Switch among Home components, and UserPage will switch among UserPage components. Is this even possible?

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

This is how project should look like and should be structured.

score 36 · Accepted Answer · edited Dec 02 '19 at 23:15

36

You can use as many Switch components as you want. It simply renders the first match of all the routes specified under it.

Something along these lines should work, in your case:

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>
  );
}

edited Dec 02 '19 at 23:15

Jimmy Obonyo Abor

7,335
10
43
71

answered Mar 10 '18 at 13:01

Shishir

2,488
20
22

It isn't working. You can try it and this is what I was trying to do, but it doesn't work. It is not showing anything but the default Components which are passed by the const App... – Amel Amcë Muminovic Mar 11 '18 at 15:14
1

Well, I found some solution. Instead of '${match.url}/about' , I used path={ match.url + '/about' } and it works – Amel Amcë Muminovic Mar 11 '18 at 15:19
Hey. Glad you were able to get it working. In my code, I'm using Template Literals. The result is the same as what you've used. If you wish to read more about it, check this out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Cheers! :) – Shishir Mar 11 '18 at 20:48
But just one more question? , if I remove '/home' here and put just '/', nothing will work. What should be the case here? – Amel Amcë Muminovic Mar 12 '18 at 14:24
Can you show me your code? Without seeing it, I can only make best guesses. (1) when you don't pass the `exact` prop to your route, it matches with everything that starts with the specified path. In this case, everything will map to that route, including `/dashboard`. To fix this, move your dashboard route above your home route. (2) In the routes defined inside `Home`, you're checking for `match.url + /about`. Since `match.url` is just `/`, it may be trying to match `//about`. To fix this, try removing the leading `/` from the routes. – Shishir Mar 12 '18 at 17:44
Can I get any of your contacts just to clarify one more thing I forgot to ask. Now when I Have back component rendering, I will need to have another heading(dashboard navbar) and another switch component. For example to have routes like abc.com/dashboard/my-profile , abc.com/dashboard/payments, etc... If I try to match them the same way I did for these two, I get 'cannot get url of undefined' – Amel Amcë Muminovic Mar 16 '18 at 21:23
2

Can you share your code? A github link, or an example on codesandbox? – Shishir Mar 17 '18 at 17:09
1

I have also found this as useful: https://reactrouter.com/web/example/nesting – BairDev Jan 06 '21 at 09:31

score 0 · Answer 2 · answered Nov 01 '22 at 16:24

I want to document one other possible way to nest/have multiple <Switch /> tags - even if it is only for future me. We had a need to build the Switch/Route paths dynamically based on a user's role. This latter part is not important for the discussion here, but the syntax below shows another way to do the nesting - even if only used to organize code.

const AllUserRoleRoutes = (
  <Switch>
    <Route path="/some/path" component={SomeComponent} />
    <Route component={PageNotFoundComponent} />
  </Switch>
);

const SomeOtherUserRoleRoutes = (
  <Switch>
    <Route path="/some/other/path" component={SomeOtherComponent} />
    {AllUserRoleRoutes}
  </Switch>
);

const App = () => {
  if(...some condition) {
    return SomeOtherUserRoleRoutes;
  }
  
  return AllUserRoleRoutes;
};

Is it possible to have multiple in React.js?

2 Answers2

Linked