Question

189

Is it possible to have multiple < Switch> in React.js?

rated 0 times [ 191] [ 2] / answers: 1 / hits: 22263 / 6 Years ago, sat, march 10, 2018, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lara

Add To Favorites

Follow

Total Points: 462

Total Questions: 100

Total Answers: 102

Location: Jersey

Member since Mon, Jun 14, 2021

3 Years ago

lara questions

1 How to watch for multiple values in Vue 3 script setup?

Thu, May 19, 22, 00:00, 2 Years ago

1 chrome.runtime.OnMessage.addListener returns duplicate messages

Tue, Jul 27, 21, 00:00, 3 Years ago

1 Using try catch in watch of Vue.js

Thu, Apr 1, 21, 00:00, 3 Years ago

1 NodeJS 12 SyntaxError: Unexpected token 'export'

Mon, Jul 27, 20, 00:00, 4 Years ago

1 In Blazor Server-Side how can I detect if the user tries to navigate off of the current page

Tue, Mar 17, 20, 00:00, 4 Years ago

View All

answered 6 Years ago annaliese · Accepted Answer

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>

  );

}