React-router-dom and react-router

preface

React-router-dom is the dom of router and react-router-dom. It is the dom of router and react-router-dom.

conclusion

  1. React – router-DOM is developed on the basis of react-router. Many components in react- router-DOM are directly exported from react- DOM. React-router-dom is not required to install react-router.

  2. On the basis of react-Router, BrowserRouter, HashRouter, Link, and NavLink components are provided to redirect routes. BrowserRouter and HashRouter are used to replace router components in React-Router. Link, NavLink function is similar to a tag;

  3. BrowserRouter and HashRouter

    1. BrowserRouter is a history route, and the route looks like thishttp://abc.com/xxxPushState and history.popState are implemented by browsers, which may be compatible with earlier versions of browsers, such as Internet Explorer. Deployment to the server requires certain configuration, which is not discussed here.
    2. A HashRouter is a hash route that looks like thishttp://abc.com#/xxxBrowsers listen for hashchange to change routes, which is compatible

You can see these differences in the modules source for react-router-dom

Switch component usage problem

The Switch component matches the Route in the order in which it is written, stops the match and renders it as soon as the first Route is found.

Then the question is, why do I need to use the Switch? Using Route +exact without the Switch component can achieve the same effect. However, if a route is matched in this way, it does not stop to continue the match, but continues to search for the route later, resulting in a waste of performance.

The resources

Juejin. Cn/post / 684490…

Segmentfault.com/a/119000002…