React-Router principle analysis
Article Directory
One or two modes: hash and history
Before the HTML5 historyAPI came out, the front-end routing was implemented through hash ('#'), the server will not parse the'#' in the path, but js can be window.location.hashread, and when the hash value changes, the hash is read Value to match the component for rendering.
History is a new API in HTML5. It is used to manipulate the browser's session history. The form of expression is the same as the original path, instead of using'#' but using'/'. However, this method requires that the back end of the server has a printed file corresponding to the path.
二、React-Router
When the URL changes (it will trigger hashchangeor history.popstate event, change the URL), the history.pushState() method will be called to push the path state onto the stack (both modes will push the new routing information onto the stack, but one has '#' one without'#'), and get the location object at the same time. Next, the matchRoutes method will match the component corresponding to the location object in the Route component tree, and get the nextState, and finally use this.setState(nextState) in the Router component to render the corresponding component.
Reference blog post: https://www.jianshu.com/p/7044952626bf