The React routing

Basic use of routing

1.Clear the navigation area and display area on the interface2.Change the a label in the navigation area to Link <Link to="/xxxxx">Demo</Link>
3.The display area writes Route labels to match paths <Route path='/xxxx' component={Demo}/>
4.The outermost part of <App> wraps a <BrowserRouter> or <HashRouter>Copy the code

Routing components versus generic components

Common components: <Demo/> Route components: <Route path="/ Demo "Component ={Demo}/> 2. Common component: Components Routing component: Pages 3. The props received are different: General component: Receives what is passed when writing component labels. Routing component: receives three fixed attributes history: go: ƒ go(n) goBack: ƒ goBack() goForward: ƒ goForward() push: ƒ push(path, state) replace: ƒ replace(path, state) location: pathName: "/about" search:" undefined match: params: {} path: "/about" url: "/about"Copy the code

NavLink and encapsulation NavLink

NavLink enables routing links to be highlighted by specifying the style name via activeClassNameCopy the code

The use of the Switch

1. Typically, there is a one-to-one relationship between path and Component. 2.Switch improves route matching efficiency (single match).Copy the code

Fix missing page style for multilevel path refresh

1. Public /index.html does not write./ write/(common) 2. Public /index.html does not write./ %PUBLIC_URL% (common) 3. Using HashRouterCopy the code

Strict matching and fuzzy matching of routes

1. Fuzzy matching is used by default. (Note: [input path] must contain [matched path] in the same order.) 2. Enable strict matching: <Route exact={true} path="/about" Component ={about}/> 3. Strict matching Do not enable strict matching. You need to enable strict matching again. In some cases, secondary routes cannot be matchedCopy the code

The use of the Redirect

1. It is written at the bottom of all route registrations. If all routes fail to match, route 2 specified by the Redirect is redirected. Specific code:  <Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Redirect to="/about"/> </Switch>Copy the code

Embedded routines by

When registering child routes, set the path value of the parent route. 2. Routes are matched according to the sequence of registered routesCopy the code

Pass parameters to the routing component

1.Params parameter route links (with parameters) : <Link to='/demo/test/tom/18'}> details </Link> Register Route (declare receive) : <Route path="/demo/test/:name/:age"Component ={Test}/> Receive parameters:this.props.match.params
2.Search parameter Route Link (carrying parameters) : <Link to='/demo/test? name=tom&age=18'}> details </Link> Register Route: <Route path="/demo/test"Component ={Test}/> Receive parameters:this.props.location.search Note: Search is a Urlencoded string, and queryString is used to parse queryString:import qs from 'querystring'; There are two commonly used methods:1. qs.stringify({id: 1.name: 'Sketchy'});		// Convert an object to a URL encoding
	2. qs.parse('id=1&name= sketchily ');				// Convert a URL encoding to an object
3.State parameter routing Link (with parameters) : <Link to={{pathname:'/demo/test'.state: {name:'tom'.age:18}}}> Details </Link> Register Route: <Route path="/demo/test"Component ={Test}/> Receive parameters:this.props. Location. state Note: Parameters can also be retained after refreshingCopy the code

Programmatic routing navigation

With this. Prosp. History on the object API of routing jump, forward, backward operation - this. Prosp. History. Push () - this. Prosp. History. The replace () -this.prosp.history.goBack() -this.prosp.history.goForward() -this.prosp.history.go()Copy the code

Differences between BrowserRouter and HashRouter

1. The underlying principles are different: BrowserRouter uses the H5 History API, which is incompatible with IE9 and later versions. A HashRouter uses a hash of a URL. The path to BrowserRouter does not contain #, for example: localhost:3000/demo/test HashRouter contains #, for example: localhost:3000/#/demo/test 3. Effect on the route State parameter after refreshing (1).BrowserRouter has no effect because state is stored in the History object. (2). The state parameter of the route is lost after the HashRouter is refreshed. 4. Note: The HashRouter can be used to solve some problems related to path errors.Copy the code

Antd’s on-demand introduction + custom themes

Install dependencies: yarn add react-app-rewired customize-cra babel-plugin-import less less-loader 2. Modify the package. The json... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, .... 3. Root directory to create config - overrides. Js / / concrete rules of the modified configuration const {override, fixBabelImports addLessLoader} = the require (' customize - cra); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ lessOptions:{ javascriptEnabled: true, modifyVars: { '@primary-color': 'green' }, } }), ); 4. Note: There is no need to introduce styles in the component itself, i.e. import 'antd/dist/antd.css' should be deletedCopy the code

Use of routing in code

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>.document.getElementById('root'));//BrowserRouter wraps the entire contents
Copy the code

Used in other components

<div> <! NavLink: activeClassName (activeClassName) : activeClassName (activeClassName)<NavLink activeClassName="active" className="style-class" to='/about'>About</NavLink>
    <Link className="style-class" to='/about'>About</NavLink><! If there are multiple routes, you can use the Switch to match the first route.<Switch>
        <Route path="/about" component={About}/>
        <Route path="/home" component={Home}/>
        <!-- Redirect作用是如果上面路由都没有匹配就默认跳转到 /about -->
        <Redirect to="/about"/>
    </Switch></div> <! -- Route nesting -- home again configured in the routing component --><Link to="/home/list">Click me to go to List</Link>
<Route path="/home/list" component={List} />
Copy the code