NavLink and encapsulation NavLink

1.NavLink can implement route link highlighting, using activeClassName to specify the style nameCopy 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

Params: <Link to='/demo/test/ Tom /18'}> <Route path="/demo/test/:name/:age" Component ={test}/> <Link to='/demo/test? Name =tom&age=18'}> Details </Link> Register Route: <Route path="/demo/test" component={test} This. Props. Location. Note: the search for the string search is urlencoded coding, need to use the querystring resolution 3. The state parameters routing link (parameters) to carry: <Link to={{pathName :'/demo/test',state:{name:' Tom ',age:18}}}> < the Route path = "/ demo/test" component = {test} / > receive parameters: this. Props. Location. Note: the state refresh can also keep parametersCopy 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