我有一个路由列表,可以检查用户是否登录,然后呈现或重定向到身份验证页面。
<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 和历史对象。我用"反应路由器-dom"的路由器 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
.坚持,但即使在这种情况下,它也应该在路由中显示日志,它不显示日志,这意味着我的代码没有重定向。它重定向而不进入我的代码,然后登陆我的代码而不进行查询参数。
有人可以帮我为什么会这样吗?
你能用代码笔重现它吗? 但是从您的代码中,我猜您总是调用重定向,这就是您看到 URL 闪烁的原因。withRouter 还会传递一个匹配对象,您可以在其中访问如下所示的参数 match.params.isLoggedIn 如果您更新路由:
<NotLoggedInRoute path="/signup" component.../>
希望这有帮助。快乐编码