如何使用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维护状态 的相关文章

  • 如何使用 React Hooks 进行 fetch; ESLint 强制执行 `exhaustive-deps` 规则,这会导致无限循环

    总的来说 我对 React hooks 还很陌生 对 React hooks 也很陌生useSelector and useDispatch in react redux 但我在执行一个简单的get当我的组件加载时请求 我想要get仅发生一
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • 如何通过 redux-persist 阻止 redux-form“form” 状态自动重新水合

    我正在使用 redux form 它提供了一个内置的减速器 称为 formReducer 需要向组合减速器注册 以使用 redux 的存储管理表单状态 我还使用 redux persist 来保存 redux 存储 当我不想让我的表单自动重
  • 在 PHP 中的请求之间存储对象而不进行序列化

    我正在用 PHP 编写一个有状态的 Web 应用程序 其中状态可能包含大量对象 目前 我将所有这些对象保存在 SESSION 中 并在请求结束时将它们序列化 这有点痛苦 因为序列化整个会话需要几秒钟 而反序列化则需要更多时间 我想尝试 AP
  • 将 next.js 与纱线工作区结合使用

    今天遇到了这样的项目结构的复杂情况 packages app pages package json ui kit pages package json shared babelrc package json root lvl 包 json
  • 反应独特的“关键”错误

    我正在浏览 React 中的待办事项列表教程 并遇到以下错误 我花了相当长的时间 只是找不到错误 这是错误和组件的代码 这就是代码对于课程存储库 此提交中出现问题 https github com andrewjmead react cou
  • Mobile Safari 在 play() 时跳过 HTML 音频的前几秒

    我有一个 React Audio Player 它使用 useAudio 挂钩来管理 HTML5 音频 除了 Mobile Safari 之外 它在任何地方都可以正常工作 在 Mobile Safari 中 声音会在播放器开始播放后几秒钟开
  • 检测 mobx observable 何时发生变化

    是否有可能检测到可观察的变化何时发生 例如 假设你有这个 observable myObject id 1 name apples id 2 name banana 随后 随着一些用户输入 这些值会发生变化 我怎样才能轻松检测到这一点 我想
  • 点击事件触发时如何获取amcharts中的气泡值

    从这里找到图像 https i stack imgur com HxH0c png import React Component from react import as am4core from amcharts amcharts4 co
  • 在 Erlang 中实现图灵机

    我有一个小项目 与实现图灵机非常相似 我遇到的基本问题是保存当前配置 例如头部的位置和更多信息 对我来说特别重要的是保留头部位置以使其向前或向后移动 Erlang 解决这个问题的方法是什么 我是 Erlang 新手 但据我探索 OTP ge
  • 如何从另一个Page调用useState?

    基本上 每当我在 handleDelete 函数中删除一个项目时 它都会路由回主页 并且我想显示一条消息 说明您的产品已成功删除大约 5 秒钟 在我的 index js 中 我首先将 message 设置为 false 在我的 Produc
  • ref scrollIntoView 不适用于反应上的平滑行为

    我正在创建一个组件 该组件将保存动态元素列表 出于样式原因 我需要将每个部分的标题保留在粘性导航菜单中 当用户上下滚动部分列表时 我需要应用样式规则 并将菜单导航中的同一部分带入视图 因此我尝试将scrollIntoView与菜单部分引用一
  • React延迟加载/无限滚动解决方案

    我花了一段时间才弄清楚如何使用优秀的延迟加载图像React Lazyload 组件 https github com jasonslyvia react lazyload 演示在滚动时延迟加载图像 但在测试时我无法获得相同的行为 罪魁祸首是
  • 如何在react/redux应用程序中以jest方式访问组件的子组件

    我想在 Redux 应用程序中测试 Connect 内的组件 this component TestUtils renderIntoDocument
  • Relay 中的嵌套片段数据始终相同

    我是 Relay 新手 并且遇到了片段上嵌套数据的问题 当我在 graphiql 中进行测试时 以下查询返回正确的数据 因此我确信我的架构是正确的 viewer customers name billing address city 但是
  • React router dom 6 中的受保护路由

    我在反应中创建了简单的用户上下文 用户提供者 export const AuthContext createContext export const AuthProvider children gt const user setUser u
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • 如何延迟 NavLink 的反应?

    Delay e gt e preventDefault setTimeout gt e unpreventDefault make this work 500 render
  • GraphQL - POST 正文丢失。您忘记使用 body-parser 中间件了吗?

    我的电脑上不断出现以下错误graphql查询但不确定原因 POST body missing Did you forget use body parser middleware 我在这里做了什么奇怪的事吗 我已经尝试了在线 body par
  • 在调试模式下运行 NPX 命令

    我有一些npx create react app命令卡住了 终端上没有显示任何错误 所以 我需要运行npx in 调试模式 有没有办法获得debug登录npx命令来识别问题 edit 我运行的命令 npx create react app

随机推荐