反应中的嵌套路线 - 路线内的路线 - 有条件的路线答案

【问题标题】：Nested routes in react - Route inside a route - conditionally route反应中的嵌套路线 - 路线内的路线 - 有条件的路线
【发布时间】：2021-07-11 03:32:44
【问题描述】：

<Switch>
    <Route exact path={NAVIGATION_PATH_FILE_UPLOAD}>
        <FileUpload/>
    </Route>
    <Route exact path={NAVIGATION_PATH_PRICE_VALIDATION}>
        {grantViewPermissionsToScreens(user, SCREEN_PRICE_VALIDATION) ? <PriceValidation/> : <PZRHome/>}
    </Route>
    <Route exact path={NAVIGATION_PATH_PRICEZONE_REASSIGNMENT}>
        <PZRHome/>
    </Route>
</Switch>

在上面的代码中，取决于用户，我可以访问 pricevalidation 或 PZRHome 组件（第二条路线）。而不是加载组件，而是我想路由到该组件的位置。（将第二条路由中的 PZRHome 组件替换为到 PZRHome 的路由（第三条路由））。这是怎么做到的？

【问题讨论】：

标签： reactjs react-router react-component

【解决方案1】：

以下方法可能有效：

    <Switch>
      <Route exact path={NAVIGATION_PATH_FILE_UPLOAD}>
        <FileUpload />
      </Route>
    {
      grantViewPermissionsToScreens(user, SCREEN_PRICE_VALIDATION) &&
        <Route exact path={NAVIGATION_PATH_PRICE_VALIDATION}>
          <PriceValidation />
        </Route>
    }
    {
      !grantViewPermissionsToScreens(user, SCREEN_PRICE_VALIDATION) &&
        <Route exact path={NAVIGATION_PATH_PRICEZONE_REASSIGNMENT}>
          <PZRHome />
        </Route>
    }
      <Route exact path={NAVIGATION_PATH_PRICEZONE_REASSIGNMENT}>
        <PZRHome />
      </Route>
</Switch>

【讨论】：