Issue with react-router-dom

Question

I was using react router dom and encountered the problem with rendering components, that is, here is my code:

 <Switch>
        <>
          <Route path="/dashboard" exact={true}>
            <Dashboard />
          </Route>
          <div className={classes.container}>
            <div className={classes.leftSide}></div>
            <div className={classes.rightSide}>
              <Route path="/" exact={true}>
                <PhoneNumber value={value} handlerFunc={handlePhoneNumber} />
              </Route>
              <Route path="/registration" exact={true}>
                <Registration phoneNumber={value} />
              </Route>
              <Route path="/login" exact={true}>
                <Login />
              </Route>
            </div>
          </div>
        </>
        </Switch>

The problem is when I go to /dashboard then divs with className of leftSide and rightSide are also rendered but I wanted to ensure that the divs are rendered ONLY when I go to /, /registration and /login

I think this is duplicated: see this answer here: https://stackoverflow.com/questions/49208310/is-it-possible-to-have-multiple-switch-in-react-js — Freestyle09, Oct 23 '20 at 10:41

score 0 · Accepted Answer · answered Oct 23 '20 at 10:47

follow this approach, this is the recommended way for nested routes by react-router docs.

    <Switch>
      <Route path="/dashboard" exact={true}>
        <Dashboard />
      </Route>
      <Route path={["/","/registration","/login"]}>
        <div className={classes.container}>
         <div className={classes.leftSide}></div>
         <div className={classes.rightSide}>
         <Switch>
          <Route path="/" exact={true}>
            <PhoneNumber value={value} handlerFunc={handlePhoneNumber} />
          </Route>
          <Route path="/registration" exact={true}>
            <Registration phoneNumber={value} />
          </Route>
          <Route path="/login" exact={true}>
            <Login />
          </Route>
         </Switch>
         </div>
       </div>
      </Route>
    </Switch>

Issue with react-router-dom

1 Answers1