React路由器无法到达重定向页面

Question

我有一个带有选项卡的页面。当我从我的应用程序导航到该页面时，我会将其推送到基本应用程序中。例如：“/profile”。

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

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

重定向没有运行。当我删除检查 profileId !== null 时，则可以正常工作。基本上，当我加载页面时，它将位于路径 /profile，然后此组件应在初始加载时处理重定向到 /feed。

- ousmane784

---

现在它只停留在/profile，没有自动重定向。 - ousmane784

使用React片段<></>在switch语句中似乎存在问题。有什么解决方法吗？ - ousmane784

Switch 只能有 Route 作为直接子元素。您可以删除条件和片段，并保留所有路由暴露。如果之前的路由都不匹配，重定向应该捕获。 - Rikin

可以返回并展开（...）一个React元素数组（例如路由），而不是将它们包装在片段中。 - DBS

Answer 1

如果您需要避免包装元素（例如这些路由），您可以使用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
  )
}

由于它将一个数组返回到渲染函数中，每个项目都应该有一个key（这被React用于优化重新渲染），因此我已将每个路由设置为其路径名称的一部分作为键，因为这些应该是唯一的。

- DBS

Answer 2

一个 <Switch> 的所有子元素都应该是 <Route> 或 <Redirect> 元素。请参阅 文档。

因此，您可以像这样重构嵌套路由（在 Profile 组件中）：

function Profile() {
  const { path } = useRouteMatch()
  return (
    <Switch>
      <Route exact path={`${path}/feed`} component={Feed} />
      <Route
        render={(props) =>
          profileId !== null ? (
            <Switch>
              <Route exact path={`${path}/friends`} component={Friends} />
              <Route exact path={`${path}/locations`} component={Locations} />
              <Route exact path={`${path}/blockedlist`} component={BlockedList} />
            </Switch>
          ) : (
            <Redirect to={`${path}/feed`} />
          )
        }
      />
      <Redirect to={`${path}/feed`} />
    </Switch>
  )
}

编辑:

你也可以在第二个内部Switch中最后添加一个重定向，这样如果用户输入/profile并且profileId是有效的，它将重定向到/profile/friends：

...
<Redirect to={`${path}/friends`} />

- Ajeet Shah

Answer 3

将您的 switch 语句用 BrowserRouter 对象包装起来，移除片段 <> 并使用 div 尝试这样做；

import {BrowserRouter as Router } from 'react-router-dom' 
<Profile>
<Router>
      <Switch>
        <Route exact path={`${path}/feed`} component={Feed} />
        
       
        {profileId !== null && (
          <div>
            <Route exact path={`${path}/friends`} component={Friends} />
            <Route exact path={`${path}/locations`} component={Locations} />
            <Route exact path={`${path}/blockedlist`} component={BlockedList} />
          </div>
        )}
        <Redirect from={path} to={`${path}/feed`} />
      </Switch>
</Router> 
 </Profile>

- crispengari