[React] Keep Application State in Sync with Browser History
Using pushState and passing route data via context allows our application to respond to route changes made from Link components, but using the back and forward buttons in the browser doesn’t update the application state as we would expect. In this lesson, we’ll add event handling to our Router component to handle history popState events so routing behavior is maintained for the back and forward buttons.
import React, {Component} from 'react'; const getCurrentPath = () => {
const path = document.location.pathname;
return path.substring(path.lastIndexOf('/'));
}; export class Router extends Component {
state = {
route: getCurrentPath()
}; handleLinkClick = (route) => {
this.setState({route});
history.pushState(null, '', route);
}; static childContextTypes = {
route: React.PropTypes.string,
linkHandler: React.PropTypes.func
}; getChildContext() {
return {
route: this.state.route,
linkHandler: this.handleLinkClick
};
} render() {
return (
<div>{this.props.children}</div>
);
} componentDidMount() {
window.onpopstate = () => {
this.setState({route: getCurrentPath()})
}
}
[React] Keep Application State in Sync with Browser History的更多相关文章
- [React] Update Application State with React Apollo ApolloConsumer Component
In this lesson I refactor some code that utilizes the Mutation component to update client-side cache ...
- react服务端渲染同构报错Browser history needs a DOM
https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..
- Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native
Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...
- [转]Session and application state in ASP.NET Core
本文转自:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/app-state By Rick Anderson and Steve ...
- React入门---属性(state)-7
state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...
- 说说React组件的State
说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...
- React组件的State
React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...
- react native中state和ref的使用
react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
随机推荐
- 03002_MySQL数据库的安装和配置
1.MySQL的安装 (1)下载mysql-5.5.49-win32.msi, 链接:MySQL安装包下载 密码:geqh : (2)打开下载的MySQL安装文件mysql-5.5.27-win32. ...
- WPF 入门《布局面板》
常见的几个布局面板 1.StackPanel面板 StackPanel面板能够简单根据单行或者单列进行元素排列, StackPanel 默认的布局方向为垂直方向(Vertical), 由Orienta ...
- 洛谷 P1303 A*B Problem
P1303 A*B Problem 题目描述 求两数的积. 输入输出格式 输入格式: 两行,两个数. 输出格式: 积 输入输出样例 输入样例#1: 复制 1 2 输出样例#1: 复制 2 说明 每个数 ...
- JAVA异常机制简述
1.类的继承结构 在JAVA所有的异常对象都是Throwable类的一个子类的实例 Exception包含两个分支,由于程序错误导致的异常属于RuntimeException,比如数组下标越界,空指针 ...
- Dell shareplex 与HVR数据复制软件
今天大体了解了一下Dell shareplex 数据复制软件,网址为:http://software.dell.com/products/shareplex/ 从该网址能够看到. shareplex作 ...
- GO语言学习(十二)Go 语言函数
Go 语言函数 函数是基本的代码块,用于执行一个任务. Go 语言最少有个 main() 函数. 你可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务. 函数声明告诉了编译器函数的名称,返回 ...
- 浅谈Normalize.css
浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...
- Something-Summary
1.Combinatorial Mathematics 1.1 Bell Number: \(B_n\)表示元素个数为n的集合划分成若干个不相交集合的方案数. \(B_{n + 1} = \sum_{ ...
- socket长连接的维持
长连接的维持,是要客户端程序,定时向服务端程序,发送一个维持连接包的.如果,长时间未发送维持连接包,服务端程序将断开连接. 客户端:通过持有Client对象,可以随时(使用sendObject方法)发 ...
- iOS开发 非常全的三方库、插件、大牛博客等等
UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableVie ...