React Router 5 不使用查询参数/状态重定向（剥离查询参数/状态）

Posted 2023-02-22

【中文标题】React Router 5 不使用查询参数/状态重定向（剥离查询参数/状态）

【英文标题】：React Router 5 not redirecting with query params/state (strips query params/state)

【发布时间】：2019-12-05 07:59:37

【问题描述】：

我有一个路由列表，它会检查用户是否登录，然后呈现或重定向到身份验证页面。例如

<Switch>
  <Route path="/" exact component=component(Home)>
  <NotLoggedInRoute path="/signup" exact component=component(Signup)>
  <LoggedInRoute path="/profile" exact component=component(Profile)>
</Switch>

NotLoggedInRoute 会检查是否设置了用户 cookie，然后重定向到主页，但如果未设置用户 cookie，则停留在注册页面。 .例如

const NotLoggedInRoute = (component, ...rest) => 
   const params = queryString.parse(window.location.search)
   const isLoggedIn = !!window.user

   return (<Route ...rest render=props => (
     (isLoggedIn === false || params.forceShow === true)
       ? <Component ...props />
       : <Redirect to="/" />
   )

问题是当我将用户从主页（在某些按钮单击上）重定向到注册路由器时，它不会使用查询参数重定向。我尝试了以下可能的选项。

使用 <Redirect to="/signup?forceShow=true" /> 根据状态显示。

使用 withRouter 和历史对象。我用'react-router-dom'的withRouter hoc包装了主页上的组件并访问history.push('/signup?forceShow=true')。我还尝试了其他变体，例如history.push(path: '', search...etc.

使用链接而不是像<Link to="/signup?forceShow=true">Test></Link>这样的按钮

尝试使用位置中的状态进行传递。它也不起作用。

在上述所有 4 种情况下，它都会进行注册，但没有查询参数。事实上，我可以在 URL 中看到查询参数，但它会在几毫秒内消失。我在NotLoggedInRoute 上添加了一个调试点和日志，这是观察结果

window.location.search 总是空白，因为我看到 URL 的地址栏中没有查询参数。现在我按下返回按钮，我可以在地址栏中看到参数。我可以假设它可能到达/signup?forceUser=true，但被重定向/signup。稍等，但即使在这种情况下，它也应该在路由中显示日志，它没有显示日志，这意味着我的代码没有重定向。它在没有进入我的代码的情况下重定向，然后在没有查询参数的情况下登陆我的代码。

有人可以帮我解释一下为什么会这样吗？

【参考方案1】：

你能用 codepen 重现它吗？ 但是从您的代码中，我猜您总是调用重定向，这就是您看到 URL 闪烁的原因。 withRouter 还传递了一个匹配对象，如果您更新路由，您可以在其中访问类似 match.params.isLoggedIn 的参数：

<NotLoggedInRoute path="/signup" component.../>

希望这会有所帮助。快乐编码

【讨论】：

这是示例，但它在这里工作：- stackblitz.com/edit/react-qs6e9x 现在我的代码中的某些原因 正在工作意味着发送查询参数，而历史记录仍然不起作用跨度>