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的更多相关文章

  1. [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 ...

  2. react服务端渲染同构报错Browser history needs a DOM

    https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..

  3. 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 ...

  4. [转]Session and application state in ASP.NET Core

    本文转自:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/app-state By Rick Anderson and Steve ...

  5. React入门---属性(state)-7

    state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...

  6. 说说React组件的State

    说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...

  7. React组件的State

    React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...

  8. react native中state和ref的使用

    react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...

  9. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

随机推荐

  1. actionbar-displayOptions 属性分析

    displayOptions 这个属性主要是控制这actionbar 上返回按钮.标题等的显示.它作为 actionBarStyle 的一个item,如下 <style name="A ...

  2. 几种基于Java的SQL解析工具的比较与调用

    1.sqlparser http://www.sqlparser.com/ 优点:支持的数据库最多,除了传统数据库外还支持hive和greenplum一类比较新的数据库,调用比较方便,功能不错 缺点: ...

  3. Win8.1部署 .NET Framework 3.5 安装方式

    Windows 8.1中包含.NET Framework,操作系统安装过程中默认安装 .NET Framework 4.5.1.如果程序需要.NET Framework 3.5支持,将自动启用相关功能 ...

  4. [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''&lt;h1 style=&quot;text-align: center;&quot;&gt;php

    [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL s ...

  5. StringBuilder和String的区别

      使用   StringBuilder 语言 C# String   对象是不可改变的.每次使用   System.String   类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为 ...

  6. 关于python的二维数组

    test =[ [1, 2, 3], [4, 5, 6], [7, 8, 9]]   #这个就可以看做是二维数组了,直接创建print(test)print(test[:][1])           ...

  7. python3 购物车小程序,余额写入文件保存

    python3 购物车小程序,余额写入文件保存 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan goods = ( ...

  8. 洛谷—— P1017 进制转换

    https://www.luogu.org/problem/show?pid=1017#sub 题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1) ...

  9. 原生js螺旋运动

    window.onload=function(){ var oSpiral=document.getElementById('spiral'); var oUl=oSpiral.getElements ...

  10. linux下实现监控进程网络带宽

    嗯,近期都在网易游戏实习,所以貌似有段时间没有上来写点东西了... 来网易游戏实习最基本的目的事实上就是想知道在游戏公司里面工作都是些什么内容,毕竟自己曾经也没有接触过游戏公司.. 还比較的好奇.. ...