ReactRouter implementation

ReactRouter implementation

ReactRouter is the core component of React . It is mainly used as the routing manager of React to keep UI and URL synchronized. It has a simple API and powerful functions such as code buffer loading, dynamic route matching, and establishing correct location transition processing.

describe

React Router is built on history object. In short, a history object knows how to monitor changes in the browser address bar and parse the URL into a location object. router then uses it to match the route and finally renders the corresponding component correctly. There are three commonly used forms history : Browser History , Hash History , and Memory History .

Browser History

Browser History is the recommended history for applications using React Router . It uses pushState , replaceState and other API of History object in the browser, as well as popstate events, to process URL . It can create a real URL like https://www.example.com/path . There is no need to reload the page when the page jumps, and of course no request will be made to the server. Of course, history mode still requires backend configuration support to support non-homepage requests and resources returned by the backend when refreshing. Since the application is a single-page client application, if the backend is not correctly configured, when the user directly accesses URL in the browser, 404 will be returned, so it is necessary to add a candidate resource on the server to cover all situations. If URL does not match any static resources, it should return the same index.html application dependency page, such as the configuration under Nginx .

location / {
 try_files $uri $uri/ /index.html;
}

Hash History

The Hash symbol # was originally used to indicate the location of a web page in URL . For example, https://www.example.com/index.html#print represents the print location of index.html of example . After the browser reads this URL , it will automatically scroll print location to the visible area. The anchor point is usually specified using name attribute of the <a> tag or id attribute of the <div> tag.
The anchor position can be read through the window.location.hash property, and hashchange listener event can be added for the change of Hash . Every time Hash is changed, a record will be added to the browser's access history. In addition, although Hash appears in URL , it will not be included in the HTTP request, that is, # and the characters after it will not be sent to the server to request resources or data. It is used to guide the browser's actions and has no effect on the server. Therefore, changing Hash will not reload the page.
The role of ReactRouter is to dynamically load and destroy components by changing URL and updating the page view without re-requesting the page. Simply put, although the address in the address bar has changed, it is not a brand new page, but some parts of the previous page have been modified. This is also the characteristic of SPA single-page application. All its activities are limited to one Web page. Non-lazy loaded pages only load the corresponding HTML , JavaScript , and CSS files when the Web page is initialized. Once the page is loaded, SPA will not reload or jump the page, but use JavaScript to dynamically transform HTML . The default Hash mode is to implement routing through anchors and control the display and hiding of components to achieve interactions similar to page jumps.

Memory History

Memory History will not be operated or read in the address bar, which explains how server rendering is implemented. It is also very suitable for testing and other rendering environments such as React Native . One difference from the other two History is that we must create it, which makes it easier to test.

const history = createMemoryHistory(location);

accomplish

Let's implement a very simple Browser History mode and Hash History mode. Because H5 's pushState method cannot run in the local file protocol file:// , you need to build an http:// environment to run it. You can use webpack , Nginx , Apache , etc. Back to Browser History mode routing, you can implement history routing jumps without refreshing the page thanks to pushState() , replaceState() and other methods provided by H5 and events such as popstate . These methods can also change the routing path, but do not make page jumps. Of course, if the backend is not configured well, the page will be refreshed after the routing is adapted, and 404 prompt will be prompted. For the Hash History mode, our implementation ideas are similar, mainly in that we do not use H5 's API such as pushState , and the listening events are different. By listening to the changes in its hashchange event, we get the corresponding location.hash to update the corresponding view.

<!-- Browser History -->
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Router</title>
</head>

<body>
 <ul>
  <li><a href="/home" rel="external nofollow" >home</a></li>
  <li><a href="/about" rel="external nofollow" >about</a></li>
  <div id="routeView"></div>
 </ul>
</body>
<script>
 function Router() {
  this.routeView = null; // component-hosted view container this.routes = Object.create(null); // defined routes }

 // Bind route matching event Router.prototype.route = function (path, callback) {
  this.routes[path] = () => this.routeView.innerHTML = callback() || "";
 };

 // InitializeRouter.prototype.init = function(root, rootView) {
  this.routeView = rootView; //Specify the view container this.refresh(); //Initialize and refresh the view root.addEventListener("click", (e) => { //Event delegation to root
   if (e.target.nodeName === "A") {
    e.preventDefault();
    history.pushState(null, "", e.target.getAttribute("href"));
    this.refresh(); // Trigger to refresh the view}
  })
  // Listen for user clicks on back and forward // pushState and replaceState will not trigger the popstate event window.addEventListener("popstate", this.refresh.bind(this), false); 
 };

 // Refresh the viewRouter.prototype.refresh = function () {
  let path = location.pathname;
  console.log("refresh", path);
  if(this.routes[path]) this.routes[path]();
  else this.routeView.innerHTML = "";
 };

 window.Router = new Router();
 
 Router.route("/home", function() {
  return "home";
 });
 Router.route("/about", function () {
  return "about";
 });

 Router.init(document, document.getElementById("routeView"));

</script>
</html>

<!-- Hash History -->
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Router</title>
</head>

<body>
 <ul>
  <li><a href="#/home" rel="external nofollow" >home</a></li>
  <li><a href="#/about" rel="external nofollow" >about</a></li>
  <div id="routeView"></div>
 </ul>
</body>
<script>
 function Router() {
  this.routeView = null; // component-hosted view container this.routes = Object.create(null); // defined routes }

 // Bind route matching event Router.prototype.route = function (path, callback) {
  this.routes[path] = () => this.routeView.innerHTML = callback() || "";
 };

 // InitializeRouter.prototype.init = function(root, rootView) {
  this.routeView = rootView; //Specify the view container this.refresh(); //Initialization trigger //Listen for hashchange events to refresh window.addEventListener("hashchange", this.refresh.bind(this), false); 
 };

 // Refresh the viewRouter.prototype.refresh = function () {
  let hash = location.hash;
  console.log("refresh", hash);
  if(this.routes[hash]) this.routes[hash]();
  else this.routeView.innerHTML = "";
 };

 window.Router = new Router();
 
 Router.route("#/home", function() {
  return "home";
 });
 Router.route("#/about", function () {
  return "about";
 });

 Router.init(document, document.getElementById("routeView"));

</script>
</html>

analyze

• Let's take a look at the implementation of ReactRouter , commit id is eef79d5 , TAG is 4.4.0 . Before that, we need to understand history library. history history library is an enhanced version of window.history that ReactRouter relies on. The main objects used are the match object, which represents the result of the match between the current URL and path . location object is a derivative of history library based on window.location .
• ReactRouter splits routing into several packages: react-router is responsible for general routing logic, react-router-dom is responsible for browser routing management, react-router-native is responsible for react-native routing management.
  
• Let's take BrowserRouter component as an example. In react-router-dom , BrowserRouter is a high-order component that creates a global history object internally, which can monitor changes in the entire route and pass history as props to Router component of react-router . Router component then passes the attributes of this history as context to the child component.

// packages\react-router-dom\modules\HashRouter.js line 10
class BrowserRouter extends React.Component {
 history = createHistory(this.props);

 render() {
 return <Router history={this.history} children={this.props.children} />;
 }
}

Next we go to Router component. Router component creates a React Context environment, which passes context to Route with the help of context , which also explains why Router should be outside all Route . In componentWillMount of Router , history.listen is added, which can monitor changes in routing and execute callback events, which will trigger setState here. When setState is called, that is, every time the route changes -> the callback event of the top-level Router is triggered -> Router performs setState -> passes down nextContext . At this time, context contains the latest location -> the following Route obtains the new nextContext to determine whether to render.

// line packages\react-router\modules\Router.js line 10
class Router extends React.Component {
 static computeRootMatch(pathname) {
 return { path: "/", url: "/", params: {}, isExact: pathname === "/" };
 }

 constructor(props) {
 super(props);

 this.state = {
  location: props.history.location
 };

 // This is a bit of a hack. We have to start listening for location
 // changes here in the constructor in case there are any <Redirect>s
 // on the initial render. If there are, they will replace/push when
 // They mount and since cDM fires in children before parents, we may
 // get a new location before the <Router> is mounted.
 this._isMounted = false;
 this._pendingLocation = null;

 if (!props.staticContext) {
  this.unlisten = props.history.listen(location => {
  if (this._isMounted) {
   this.setState({ location });
  } else {
   this._pendingLocation = location;
  }
  });
 }
 }

 componentDidMount() {
 this._isMounted = true;

 if (this._pendingLocation) {
  this.setState({ location: this._pendingLocation });
 }
 }

 componentWillUnmount() {
 if (this.unlisten) this.unlisten();
 }

 render() {
 return (
  <RouterContext.Provider
  children = {this.props.children || null}
  value={{
   history: this.props.history,
   location: this.state.location,
   match: Router.computeRootMatch(this.state.location.pathname),
   staticContext: this.props.staticContext
  }}
  />
 );
 }
}

When we use it, we use Router to nest Route , so now we come to the Route component. The role of Route is to match the route and pass it to the component props to be rendered. Route accepts context passed in by the upper-level Router . history in Router monitors the route changes of the entire page. When the page jumps, history triggers the listening event, and Router passes nextContext down, which will update props and context of Route to determine whether path of the current Route matches location . If it matches, it will be rendered, otherwise it will not be rendered. The basis for whether it matches is the computeMatch function, which will be analyzed below. Here you only need to know that if the match fails, match is null . If the match succeeds, the result of match is used as part of props and passed to the component to be rendered in render . Route accepts three types of render props , <Route component> , <Route render> , <Route children> . At this time, it should be noted that if the passed component is an inline function, since props.component is newly created each time, React will think that a new component has come in during diff , so it will unmount and re-mount the old component. At this time, you need to use render . Without a layer of wrapped component element, the element type after render is expanded is the same every time, so re-mount will not occur, and children will not be re-mount either.

// \packages\react-router\modules\Route.js line 17
class Route extends React.Component {
 render() {
 return (
  <RouterContext.Consumer>
  {context => {
   invariant(context, "You should not use <Route> outside a <Router>");

   const location = this.props.location || context.location;
   const match = this.props.computedMatch
   ? this.props.computedMatch // <Switch> already computed the match for us
   : this.props.path
    ? matchPath(location.pathname, this.props)
    : context.match;

   const props = { ...context, location, match };

   let { children, component, render } = this.props;

   // Preact uses an empty array as children by
   // default, so use null if that's the case.
   if (Array.isArray(children) && children.length === 0) {
   children = null;
   }

   if (typeof children === "function") {
   children = children(props);
   // ...
   }

   return (
   <RouterContext.Provider value={props}>
    {children && !isEmptyChildren(children)
    ? children
    : props.match
     ? component
     React.createElement(component, props)
     : render
      ? render(props)
      : null
     : null}
   </RouterContext.Provider>
   );
  }}
  </RouterContext.Consumer>
 );
 }
}

In fact, the tag we probably write the most is the Link tag, so let's take a look at the <Link> component again. We can see Link ultimately creates an a tag to wrap the element to be jumped to. In the handleClick event of this a tag, preventDefault will prohibit the default jump, so in fact href here has no practical effect, but it can still indicate URL of the page to jump to and have better html semantics. In handleClick , preventDefault for clicks that are not preventDefault , left-clicked, not _blank jumps, and not holding down other function keys, and then push into history . This is also the previously mentioned that the route change and page jump are not related to each other. ReactRouter calls pushState of HTML5 history through push of history library in Link , but this only changes the route and nothing else. In listen in Router , it will listen to the changes in the route, and then update props and nextContext through context to let the underlying Route re-match and complete the update of the part that needs to be rendered.

// packages\react-router-dom\modules\Link.js line 14
class Link extends React.Component {
 handleClick(event, history) {
 if (this.props.onClick) this.props.onClick(event);

 if (
  !event.defaultPrevented && // onClick prevented default
  event.button === 0 && // ignore everything but left clicks
  (!this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.
  !isModifiedEvent(event) // ignore clicks with modifier keys
 ) {
  event.preventDefault();

  const method = this.props.replace ? history.replace : history.push;

  method(this.props.to);
 }
 }

 render() {
 const { innerRef, replace, to, ...rest } = this.props; // eslint-disable-line no-unused-vars

 return (
  <RouterContext.Consumer>
  {context => {
   invariant(context, "You should not use <Link> outside a <Router>");

   const location =
   typeof to === "string"
    ? createLocation(to, null, null, context.location)
    : to;
   const href = location ? context.history.createHref(location) : "";

   return (
   <a
    {...rest}
    onClick={event => this.handleClick(event, context.history)}
    href={href}
    ref={innerRef}
   />
   );
  }}
  </RouterContext.Consumer>
 );
 }
}

Daily Question

https://github.com/WindrunnerMax/EveryDay

refer to

https://zhuanlan.zhihu.com/p/44548552 https://github.com/fi3ework/blog/issues/21 https://juejin.cn/post/6844903661672333326 https://juejin.cn/post/6844904094772002823 https://juejin.cn/post/6844903878568181768 https://segmentfault.com/a/1190000014294604 https://github.com/youngwind/blog/issues/109 http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

This is the end of this article about the implementation method of ReactRouter. For more information about the implementation of ReactRouter, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!