Routing knowledge

1： Routing is divided into front-end routing and back-end routing

Back end routing is used to process requests submitted by users , When node When you receive a request , Find a matching route according to the request path , Call the function in the route to process the request , Then respond to the data

Front-end routing ： Used to show the content of the page

2： Simple preparation

download react-router-dom：npm i --save react--router-dom

introduce bootstrap.css style

Confirm the navigation area and display area , Navigation area a Need to write as Link label     Writing in the exhibition area Router Label for route matching ,App Need a package outside the label   BrowserRouter perhaps HashRouter    label

3： Route switching display process ：

（1） stay index.js in introduce BrowserRouter route , hold app Package

（2） stay components Create two components   And then we'll separate from each other     from react Introduction in Component    then export export   div  What needs to be displayed

（3） And then again app Introduce these two components into   , And then react-router-dom Introduction in Link{ Form a label }, and Router{ Rendering components }

（4） And then in render in return get out Link To match the address      br below     Display component for route matching Router

In this way, you can click and have different pages .

4：NavLink and Link difference ：

use NavLink When you click, it will automatically bring class：active This class , It can also be in NavLink For label modification activeClassName=“ Custom class ”

5： Yes NavLink encapsulate ,

stay component Created in MyNavLink  And then from react introduce Component  from react-router-dom Introduction in Navlink.

And then in export export MyNavLink render Inside return get out NavLink label .

At this moment in app.js Inside br There is no need to write on it NavLink label , Directly above import Packaged , Then write the name of the package as a label   .

6：NavLink  Pass value

log Output discovery NavLink There are tags in the tag. props  Value has to  and childer   

So I can be in NavLink In the label hold {...this.props} Throw in So that makes NavLink There's a label to    and childer attribute

childer The data carried is the words written with labels

to Is the address used by the label   

7：Switch Have to use

  commonly path and component It's a correspondence , When used switch Then match the path , Don't write down

  Generally solve problems ： When I create two components , I used it path Give them the same path , But the component matching is different , When I click this path, two components will appear .（ useless ）

（1） stay react-router-dom Introduction in switch

And then put br As shown below router Exhibition use switch Label the parcel In this way, when I click, the contents of the two components will not appear . Instead, the corresponding display .

8： Tag plus exact For exact matching