reactjs - React Router 5 不使用查询参数/状态重定向(剥离查询参数/状态)
问题描述
我有一个路由列表,可以检查用户是否登录,然后呈现或重定向到身份验证页面。例如
<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 和 access 包装了主页上的组件
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
。稍等,但即使在这种情况下,它也应该在路由中显示日志,它没有显示日志,这意味着我的代码没有重定向。它在没有进入我的代码的情况下重定向,然后在没有查询参数的情况下登陆我的代码。
有人可以帮我为什么会这样吗?
解决方案
你能用codepen重现它吗?但是从您的代码中,我猜您总是调用重定向,这就是您看到 URL 闪烁的原因。withRouter 还传递了一个匹配对象,如果您更新路由,您可以在其中访问类似 match.params.isLoggedIn 的参数:
<NotLoggedInRoute path="/signup" component.../>
希望这可以帮助。快乐编码
推荐阅读
- reactjs - onClick 时 GraphQL useLazyQuery 无法正常工作
- recursion - 如何解决这个间接递归错误?
- python - 为什么我在 MacOS 中关闭正在运行的 python 程序后仍然有 python 进程?
- php - 如何在单个帖子末尾显示类别中帖子的缩略图?
- python - 如何在opengl(python)中旋转三角形,而不是三角形轴?
- maven - 如何从 Maven 配置文件运行特定的 suiteXmlFile
- laravel - Laravel 事件未广播给发送者,而是广播给所有其他连接的套接字
- flutter - 如何在 runApp(MyApp()) 之前使用环境变量;
- python - 这个程序的空间复杂度是多少
- flutter - Flutter:将布尔值更改为 true onPressed