[React] Keep application state on Sync with Browser

Using Pushstate and passing route data via context allows our application to respond to route changes made from Link compo Nents, 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 the history of Popstate events so routing behavior are Maintained for the back and forward buttons.

Import React, {Component} from 'react';ConstGetcurrentpath = () = {    ConstPath =Document.location.pathname; returnPath.substring (Path.lastindexof ('/'));}; ExportclassRouter extends Component { state={Route:getcurrentpath ()}; Handlelinkclick= (route) = = {         This. SetState ({route}); History.pushstate (NULL,"', route);    }; StaticChildcontexttypes ={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 on Sync with Browser