如何使用react-router维护状态

2024-04-22

我有一个 React 应用程序,其中包含一个保存初始状态的主 App.js 文件。然后,我设置了一些路线来导航我的应用程序。

在其中一条路线中,我有一个按钮,按下该按钮会处理设置的状态。我知道这是有效的,因为我已经控制台记录了状态的变化。然而,它随后也调用:

window.location.href = '/';

然后,这会将我们引导至我们的主页。但是,一旦主页呈现,状态就会恢复到其初始设置,如 App.js 中详述。我不知道为什么一旦我重新路由到网站的其他部分,状态就不会得到维护。鉴于我正在使用react-router,这是否意味着我需要使用redux来处理应用程序的状态?


发生这种情况是因为您正在使用窗口对象而不是反应路由器进行重定向。您不需要使用 redux。要使用react router,你需要使用它的history方法。然后在组件内按如下方式使用它:

this.props.history.push('/');

例如,采用以下反应功能组件:

const LoginButton = ({ history }) => (
  <button onClick={() => { history.push('/login'); }} >
    Log in
  </button>
);

解释:上面的组件,从 props 中解构历史记录,然后用它来重定向到登录页面

历史API链接:https://reacttraining.com/react-router/web/api/history https://reacttraining.com/react-router/web/api/history

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用react-router维护状态 的相关文章

  • 博览会错误:连接 ETIMEDOUT 104.197.216.164:443

    我尝试在我的 android 上通过 expo 运行 React Native android 模拟器 我在过去 24 小时内一直遇到此错误 Error connect ETIMEDOUT 104 197 216 164 443 at TC
  • 这个特定的 ReactJs 代码是如何执行的初学者问题?

    我是初学者 正在阅读大量代码 现在我想知道下面的代码我明白这段代码在做什么 我需要澄清的是代码流程 当我运行它时 我看到图像正在加载 React 是从上到下执行代码吗 占位符图像异步获得正确的图像 但会App如果需要时间 组件会开始渲染但没
  • React + 路由器 + Google 标签管理器

    我花了一些时间在 Quickcypher com 上开发 MVP 我想开始进行一些分析 它对于跟踪总访问量非常有用 但是当我尝试跟踪使用 React Router 的网站上的不同 URL 时 情况却出问题了 我的方法是这样的 设置一个在某些
  • DevSettings.reload() 用于 React Native 中的注销

    问题 我正在将混合应用程序的注销功能从本机迁移到反应本机 要求 它可以在生产环境和设备上运行 它导航到应用程序的根屏幕 登录屏幕 它清除 redux 存储 很高兴有 它会取消任何飞行中的请求 最初 我们计划做这样的事情 如何重置 redux
  • React Query useInfiniteQuery 使单个项目无效

    使用 useInfiniteQuery 时如何使单个项目无效 这是一个演示我想要实现的目标的示例 假设我有一个成员列表 每个成员都有一个关注按钮 当我按下 关注 按钮时 会单独调用服务器来标记给定用户正在关注另一个用户 此后 我必须使整个无
  • 如何在 AWS Amplify 上运行 React/Redux 应用程序的代理

    我最近实施了Proxy 在 Express js 中 对于我的反应应用程序发出请求时隐藏 API URL 当我在本地主机上运行代理和应用程序时 它工作得非常好 现在我已准备好将我的应用程序部署到AWS 放大 我对如何让我的代理在那里运行有点
  • useEffect 中的 useState 不更新状态

    我是 React Hooks 新手 正在使用 React 16 13 1 我要实施Auth能够处理登录的组件 但似乎没有更新状态currentUser正确地 尽管setCurrentUser使用响应对象调用 这段代码有什么问题 import
  • SyntaxError:无法在动态导入 Nextjs 的模块外部使用 import 语句

    我遵循了SunEditor的文档 它是这样的 import React from react import dynamic from next dynamic import suneditor dist css suneditor min
  • 如何通过 Web3-react 保持 MetaMask 与 UI 的连接持久?

    我正在使用 web3 react 但我不知道如何在浏览器刷新时保持与 MetaMask 钱包的连接持续 这是代码 define the injectedConnectors const injectedConnector new Injec
  • Next JS - 源代码中缺少元标签

    我安装了多个元标记 例如标题 描述 关键字等 但是 它没有在查看源代码中显示这些标签 因此 Facebook 共享卡无法正常工作 我已经安装了og标签 但在 Facebook 上似乎找不到它们Scraper或我的查看来源 然而 它填充在客户
  • React useEffect hook 和 Async/await 自己的获取数据函数?

    我尝试创建一个从服务器获取数据的函数 并且它有效 但我不确定这是否正确 我创建了一个函数组件来获取数据 使用useState 使用效果 and 异步 等待 import React useState useEffect from react
  • 使用材质 UI 更改反应选择中的禁用属性

    我正在尝试使用材料用户界面更改反应应用程序中选择按钮单击的禁用属性 我的按钮代码是
  • FocusState Textfield 在工具栏 ToolbarItem 中不起作用

    让我解释一下 我有一个带有 SearchBarView 的父视图 我正在传递这样的焦点状态绑定 SearchBarView searchText object searchQuery searching object searching f
  • React 路由器路由加载器不适用于嵌套组件

    我正在使用 React Router v6 我想在组件加载之前使用新的加载器来加载数据 所以我有以下内容 在我的index js中 const router createBrowserRouter createRoutesFromEleme
  • 如何将数组与 setState 一起使用?

    我目前正在使用以下命令将数组映射到 setState 但没有设置任何内容 也没有记录任何错误 如果我明确地逐行写出它 它就会起作用 关于如何解决这个问题有什么想法或建议吗 使用数组设置状态 不设置状态 const myData messag
  • React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

    我有以下内容svg我传递道具的组件 import React from react export default props gt
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • ViewPager 的 Android Viewholder

    您好 我正在使用 ViewPager 但我现在想保留状态 而不是重新生成单元格 我注意到 viewpager 与 listviews 的自定义适配器非常相似 它们的功能类似 listview 在单元格不再出现在屏幕上后重新生成单元格中的数据
  • 无法验证 CSRF 令牌的真实性 Rails/React

    我的 Rails 应用程序中有一个 React 组件 我正在尝试使用它fetch 发送一个POST对于我在本地主机上托管的 Rails 应用程序 这给了我错误 ActionController InvalidAuthenticityToke
  • 如何使用 React 制作垂直选项卡

    有人可以为我提供一种使用 React 创建垂直选项卡的方法吗 我尝试了各种npm包 如react web tabs reactstrap和react bootstrap 最后两个只有水平选项卡的示例 React web tabs在其文档中有

随机推荐