reactjs - react 路由器没有达到重定向

Question

我有一个页面，上面有标签。当我导航到我的应用程序上的页面时，我会推送到基本应用程序。 IE。 “/个人资料”。

这是我的个人资料组件，被调用的页面。

<Profile>
      <Switch>
        <Route exact path={`${path}/feed`} component={Feed} />
        
       
        {profileId !== null && (
          <>
            <Route exact path={`${path}/friends`} component={Friends} />
            <Route exact path={`${path}/locations`} component={Locations} />
            <Route exact path={`${path}/blockedlist`} component={BlockedList} />
          </>
        )}
        <Redirect from={path} to={`${path}/feed`} />
      </Switch>
    </Profile>

重定向永远不会运行。当我删除检查 if profileId !== null 然后它工作。基本上，当我加载页面时，它将位于路径 /profile，然后该组件应在初始加载时处理重定向到 /feed。

Answer 1

如果你需要避免包装一个元素(就像这些 Route 一样)，你可以改为展开一个 JSX 元素数组，如下所示:

<Switch>
  <Route exact path={`${path}/feed`} component={Feed} />
  {...(profileId !== null ? [
    <Route exact path={`${path}/friends`} component={Friends} key='friends' />,
    <Route exact path={`${path}/locations`} component={Locations} key='locations' />,
    <Route exact path={`${path}/blockedlist`} component={BlockedList} key='blockedlist' />
  ]: [])}
  <Redirect from={path} to={`${path}/feed`} />
</Switch>

分解一下，这是在做什么:

{
  ...( // The spread operator will expand the array it's given into its components
    conditional ? // Check your condition
      [routes]: // If it's true, return the routes
      [] // If not, return no routes
  )
}

因为它将一个数组返回到渲染函数中，所以每个项目都应该有一个键( react 使用它来优化重新渲染)所以我将每条路线设置为有一部分它的路径名作为键，因为它们应该是唯一的。