如何在反应路由器转换中保持状态

2024-02-17

我已经设置了相当典型的反应路由器应用程序:

var App = React.createClass({
    render: function() {
        return ( < RouteHandler /> );
    }
});

var routes = (
    <Route handler = { App }>
        < Route name = "Todo" path = "todo/:id" handler = {Todo}/>
        < DefaultRoute name = "Todos" handler = {Todos}/>
    </Route>
);

Router.run(routes, function(Handler) {
    React.render( < Handler /> , document.getElementById('content'));
});

我的问题是我的Todos组件上有一些搜索过滤器,当我转换到特定的组件时,我想保留这些过滤器Todo然后回来。显而易见的解决方案是将这些过滤器值保存在App的状态,但我想不出一种优雅的方式来允许Todos进入App的状态。

有什么提示吗?

Addendum:这个应用程序使用 Reflux 以及 React-router。


我想要保存状态过滤器和列表页码的网址。

反应路由器“这种方法的好处”之一是:URL 是您首先想到的,而不是事后想到的.

url 是网络的基础部分,充分利用它,不要试图避免它。

通过将过滤器状态保存在 URL 中,您可以免费获得后退按钮支持,并且允许用户将该过滤状态保留为书签或链接。

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

如何在反应路由器转换中保持状态 的相关文章

  • 如何强制传单更新地图?

    当我将 Leaflet 与 React 一起使用时 我遇到了问题 据我研究 问题是 Leaflet 也想控制 DOM 渲染 现在 国家将使用与后端信息相对应的特定颜色代码 范围为1 gt 100 正确着色 但是 它每分钟更新一次 更新后 国
  • 使用 React Router 路由到另一个组件时 CSS 不会改变

    当我使用以下命令将我的应用程序路由到另一个组件时反应路由器 DOM https www npmjs com package react router dom CSS 不会改变 这是演示代码的简约版本 App js import React
  • 如何使 TextInput 只接受最多 2 位小数且最大值?

    这是我在 React Native 中的 TextInput 组件的代码片段 模拟器上的渲染如下所示 我想让输入字段只接受十进制数onChangeText函数 我正在更新状态的值 我有什么想法可以实现这个输入绑定的最大值吗 我要检查里面的值
  • create-react-app 之后 React npm start 不起作用

    我正在学习 React 而且我的英语很差 我已经有两个反应项目 但它们也不起作用 我按照以下步骤操作 npx 创建反应应用程序我的应用程序 cd 我的应用程序 npm 启动 但它不起作用 我尝试清理缓存并再次安装 npm 但没有成功 我该如
  • 将本地图像路径作为两个功能组件之间的 prop 传递

    我正在使用 React Native 开发一个项目 在该项目中我很难理解 props 在功能组件之间的工作原理 我的要求是创建一个可重用的按钮组件 我可以在其中传递项目内资源文件中的图像位置 这样它就会为我创建按钮 由于某种原因 如果我手动
  • 设置时区 React-Datepicker

    我正在使用反应日期选择器 https www npmjs com package react datepicker让用户选择一个日期 但是 现在它使用本地时间 PDT 但我想对其进行硬编码以使用特定时区 PST 我尝试使用utcOffset
  • 样式组件如何影响性能?

    使用样式组件是否比样式表更会降低 Web 应用程序的速度 如果我关心性能并且没有任何依赖于 props 的样式 我是否应该放弃样式组件并使用样式表 当您有很多小组件时 同时使用样式化组件渲染 性能开销可能会很有意义 绝对值得测试以删除小元素
  • 如何在每个测试中更改笑话模拟函数的返回值?

    我的组件测试文件中有一个像这样的模拟模块 jest mock magic index gt navigationEnabled gt true guidanceEnabled gt true 这些函数将在我的组件的渲染函数中调用 以隐藏和显
  • 我如何设计react-datepicker的样式?

    我在用着webpack 反应日期选择器并设法使用提供的 css 模块导入其 css import react datepicker dist react datepicker cssmodules css 该组件看起来不错 但现在我想让它像
  • 如何在rails中使用npm包?

    我正在尝试使用王牌编辑 https github com ajaxorg ace在我的 Ruby on Rails 应用程序中 大部分视图由 React 组件组成 我正在使用反应轨道宝石 https github com reactjs r
  • 获取React组件的类型propTypes定义

    假设有以下代码 TestComponent propTypes text React PropTypes string myEnum React PropTypes oneOf News Photos 我在另一个文件中执行了以下操作 使用
  • 将 redux 数据保存为 state 中的对象数组,如果 state 有先前的状态可用,则更新状态

    我收到的回复如下格式示例 const response data name abc age 10 id 10 name def age 15 id 20 name abc 我想将其保存在我的 redux 状态中 如果 response na
  • 处理 Redux 和 React 中错误的最佳实践

    我的 redux 操作中有一个异步函数 它在我的减速器中返回一个像这样的对象 user fetching false fetched false error null 所以基本上当我开始调用异步函数时我将 redux 状态更新为fetchi
  • 如何聚焦反应路由器链接

    我有一个用于搜索的输入框 并且希望能够按向下键将焦点从输入移动到列表的第一个s 看来我这里的东西不起作用 因为不是实际的 DOM 节点 我能够使用它来工作 a 代替 though let Link require react router
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • 渲染作为 Prop 传入的 Component

    我怎样才能渲染一个StyledComponent它是作为道具传入的吗 我正在传递一个Spinner组件到我的BarComponent作为渲染的道具 我尝试使用 this props icon in my BarComponent在下面的示例
  • 提及列表和表情符号顶部位置 (Draft.js)

    您能帮我如何将其位置从下到上更改吗 我想在文本顶部而不是底部显示提及列表 关于表情符号列表的同样问题 示例链接 https www draft js plugins com plugin emoji 你可以通过以下方式实现它position
  • 刷新或直接点击链接时找不到 React.js 页面

    我在此链接上有一个反应项目 https notchy cross 000webhostapp com https notchy cross 000webhostapp com 如果向下滚动 您会看到一个名为 产品类别 的部分 https i
  • 在 React 应用程序的 shell 脚本中设置环境变量

    我正在尝试在 powershell 和 bash 脚本中设置一些环境变量 并在 ReactJS 应用程序中读取它们 shell脚本很简单 env AUTHDOMAIN some domain com env AUTHCLIENTID bun
  • React 中的 Reconciliation 详解

    我是 React JS 的新手 谁能准确解释和解是如何运作的 我尝试从 React 官方网站上理解它 但没有得到它 我是这样理解的 您会同意 React 使用组件使事情变得简单且更快 通过 JSX 我们可以让用户定义的组件变得更容易 一天结

随机推荐