提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[React] Keep Application State in Sync with Browser History

React in with application State history Sync keep
2023-09-14 09:00:52 时间

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

 

相关文章