react-router-dom 的问题答案

【问题标题】：Issue with react-router-domreact-router-dom 的问题
【发布时间】：2020-10-23 10:39:36
【问题描述】：

我用的是react router 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 时，也会呈现 className 为 leftSide 和 rightSide 的 div，但我想确保仅在转到 /、/registration 和 /login 时呈现 div

【问题讨论】：

我认为这是重复的：在此处查看此答案：stackoverflow.com/questions/49208310/…

标签： reactjs react-router-dom

【解决方案1】：

遵循这种方法，这是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>

【讨论】：