react-router-dom的问题

Question

我在使用react路由器dom时遇到了渲染组件的问题，也就是说，这是我的代码：

 <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>

问题是，当我转到/dashboard时，带有leftSide和rightSide的className的div也会呈现，但我希望确保只有在转到/、/registration和/login时才会呈现div

Answer 1

遵循这种方法，这是react-router文档对嵌套路由的推荐方式。

    <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>