This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

The React routing

SPA

The application is a single Page Web Application. There is only one page for the entire app, and clicking on a link in the page does not refresh the page, but only partially updates the page. The data needs to be retrieved through Ajax.

In other words, routing is a technology that allows us to do local refreshes on the same page (single page, multiple components).

Understanding routing

  • A route is a mapping (key: value)

  • Key is the path, value can be a function(back-end route) or component(front-end route);

  • Get (path, function(req, res))). When node receives a request, it finds a matching route based on the request path, calls the function in the route to process the request, and returns the response data.

  • Front-end routing: Registration: Route path=”/test” Component ={test}. Used to display page content. When the browser path changes to /test, the current routing component becomes the test component. For example, for a page at 127.0.0.1:3000, the home component is displayed when it is 127.0.0.1:3000/home (not /home.html).

  • For example, in the example below, the page is switched, not the component. (Here’s how to write multiple components on the same page.)

First of all, check out the React plugin library react-Router-DOM (manually downloaded), which is designed to implement a SPA application and is used by most react based projects.

The front-end routing

History (Front-end Routing Basis)

In the previous section of BOM, there is a history method. In this section, we introduce a history JS file to call the history method directly. The browser history is a stack structure.

< script SRC = "https://cdn.bootcss.com/history/4.7.2/history.js" > < / script > let history = history. CreateBrowerHistory (); / / direct use of H5, introduced the history of the API / / let the history = history. CreateBrowerHistory (); Function push(path) {history.push(path); } function replace(path) {history.replace(path); } function back() {history.goback (); } function forward() {history.goforward (); } history.listen(location)=> {// listen for path change console.log(location); }Copy the code

case

Let’s implement the above example. The tag is used to jump to different pages in native JS, while the < Link /> component is used to switch components in React. Note: The Link here is from the React-router-dom library. When components are displayed separately, you need to register a route.

Basic steps :(1) confirm the navigation area and display area on the interface; (2) The A tag in the navigation area is changed to Link tag; (3) Route label in the function pane matches paths; (4) Wrap a

or

on the outside of

// App.jsx import { Link, BrowserRouter, <Link className="list-group-item" > <Link className="list-group-item" > <Link className="list-group-item" > To ="/about"> about </Link> <Link className="list-group-item" to="/home"> home </Link> component={About}></Route> <Route path="/home" component={Home}></Route>Copy the code

When a route is used, it needs to wrap a layer of
in the outer layer, which is equivalent to a router and manages the contents inside. And there can only be one router, not two, otherwise it is equivalent to two routers, there is no data communication between two routers. So you can put a router on the outside of the App component while it’s rendering. namely

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);
Copy the code

In this way, a SPA can be implemented. You can see that the page path has changed, and that the tag rendered to the browser is actually converted to the tag, and the to to is converted to the href (which is converted to a browser-recognized tag). But it is a display of components rather than a jump between pages (no.html suffix), and open network on the console to see that the browser is not sending the request.

If you want to add the highlight from the example above, change the Link to NavLink (remember from react-router-dom). Active =”…”; active =”…”; active =”…” (The default value for this is active)

<NavLink activeClassName="home" className="list-group-item" to="/home"> home </NavLink activeClassName="home" className="list-group-item" to="/home" children="Home"></NavLink>Copy the code

Bottom line: NavLink can highlight a route link, specify the style name with activeClassName, and the tag body is a special tag attribute that can be obtained with this.props. Children.

The above component is a routing component, so how is it different from a normal component?

  • Different way to write it. Generic components: write directly to the component label:
    ;

  • Different storage location. General components are placed in Components; The routing component is typically located in Pages.

  • The props are different. Generic component: It receives what is passed to it; Routing component: Receives three fixed properties

For the routing component, we print its props property. We don’t pass it props (history, location, match) when we use the component, but it will have its own props (history, location, match) where history.location=location. For a normal component, if no value is passed to it, it prints props as null.

Switchcomponent

Improve efficiency: Switch component. The following code will not continue to match the home component after matching with /home. Otherwise, the Test component is also displayed on the page. Note: Import the Switch from the React-router-dom.

<Switch>
    <Route path="/about" component={About}></Route>
    <Route path="/home" component={Home}></Route>
    <Route path="/home" component={test}></Route>
</Switch>
Copy the code

In general, we don’t want the same path to show multiple components, if that’s the case we can use the Switch. In general, path and Component are one-to-one, and Switch can improve route matching efficiency (single match).

Come on!