I. Relevant dependency packages

Router routing is a member of the react family bucket [react+redux + router], which is used to distribute components and organize resources in the project. Let's look at the packages associated with routing.

It mainly includes react-router and react-router-dom packages.

• Reaction-router is the core function of routing.
• Reaction-router-dom is based on react-router, and some functions are added in the browser running environment, such as Link and NavLink components.

Router, Route,Redirect,Switch are commonly used in project development. They all come from react-router. So in general, browser-based development only needs to install react-router-dom, and react-router dependency will be installed automatically. The development of non-browser environments can install react-router separately.

Installation command:

 npm install react-router-dom --save --dev-save 
 
 npm install react-router --save --dev-save // Development of non-browser environment

npm install react-router-dom --save --dev-save

Import packages and common components
import { BrowserRouter/HashRouter as Router, Route, RouteProps, Link, NavLink, Redirect, Switch,RouteComponentProps,withRouter } from 'react-router-dom';
//Amount to
import { BrowserRouter/HashRouter as Router, Route, RouteProps, Redirect, 	Switch,RouteComponentProps,withRouter } from 'react-router-dom';
import { Link, NavLink} from 'react-router-dom';

II. Routing usage

Root routing uses Browser Router or HashRouter packages

import { BrowserRouter or hashRouter as Router, Route } from "react-router-dom";
const store = createStore(rootReducer, applyMiddleware(...defaultMiddlewares));
function App() {
  return (
    <Provider store={store}>
      <Router>
        <Route path="/" component={AppComponent} />
      </Router>
    </Provider>
  );
}

Browser Router or HashRouter components should be used for package routing in the project's root routing. Briefly introduce the following reasons:

It allows you to quickly add views and data streams to your application while keeping pages and URL s in sync.

When react-router is not used

To make our URL parsing smarter, we need to write a lot of code to specify which nested branch of UI components the URL should render:,, etc.

`App -> About`
`App -> Inbox -> Messages -> MessageApp -> Inbox -> Messages -> Stats`. 

After using routing: React Router knows how to build nested UI s for us, so we don't have to find out which components need to be rendered manually. For example, React Router will come up with a complete path. Internally, <Child> `about `App> < About /> </App>, routers will convert your tree-level nested formats into routing configurations.

To learn more about the reference documentation, compare http://react-guide.github.io/react-router-cn/docs/Introduction.html before and after using React-router

Therefore, using React-Router will greatly facilitate and improve efficiency.

Difference

1. Browser Router is server-side routing and HashRouter is client-side routing

2. BrowserRouter's URL path standard URL path / hash routing is not through slash / mode, but through # mode

3. If some low-level browsers are supported, the pages will not be refreshed by slash mode browsers, which requires hash routing [HashRouter].

   There is also a Memory Router, which does not react to the url and is used for server segment rendering, but also for the front end.

import {MemoryRouter} from 'react-router'

Routing nesting

After react router 4.0, routing nesting mode adds new routing to the component that needs nested routing. This is also a way of organizing component resources. Routing is divided according to function and code structure is organized according to routing.

import * as React from "react";
import { Route, Switch } from "react-router-dom";
const AppComponent = ({ match }) => {
  return (
       <Switch>
          <Route path="/" exact component={HomePage} />
          <Route path="/history" component={History} />
        </Switch>
  );
};

const history = ({ location }) => {
  return (
        <Switch>
          <Route path="/history/second" exact component={SecondQuarter} />
        </Switch>
  );
};

Route Matching Principle Mode

Route, Link, NavLink, Redirect are components related to route matching url path

Route,Link,NavLink,Redirect
<Route path="/history" component={History} exact />
<Link to="/history">first quarter</Link>
<NavLink to="/history" activeClassName="red">first quarter</Link>
<Redirect to="/history">

Multipath matches the same component, relative path absolute path

Routing Packet Function

Routing parameter selection