zoukankan      html  css  js  c++  java
  • [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()})
            }
        }
  • 相关阅读:
    2020软件工程作业04
    2020软件工程作业02
    第一周作业
    2019春总结作业
    12周作业
    第十一周作业
    第十周阅读
    第9周编程总结
    编程总结模版
    第8周编程总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6363229.html
Copyright © 2011-2022 走看看