[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()})
        }
    }