Question

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

<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，则保留在注册页面上。 .e.g

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" />进行显示。
与路由器和历史记录对象一起使用。我使用“ 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。稍等，但即使在那种情况下，它也应该在路由中显示日志，但不显示日志，这意味着我的代码没有重定向。它会重定向而不进入我的代码，然后在没有查询参数的情况下进入我的代码。

有人可以帮我为什么吗？

Answer 1

可以用码笔复制它吗？但是从您的代码中，我想您总是调用重定向，这就是为什么看到URL闪烁的原因。 withRouter还传递一个match对象，如果您更新此路由，则可以在其中访问诸如match.params.isLoggedIn之类的参数：

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

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

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

1 个答案: