React-router renders in three different ways

Introduction to react to the router

The React – Router contains three libraries

• react-routerReact-router-dom (used in browser) or React-router-native (used in RN) will be installed according to the application environment.
• react-router-dom: Both rely on the React-router. Therefore, the React-router is automatically installed during installation to create web applications
• react-router-native: same as above

The installation

npm install --save react-router-dom
Copy the code

The basic use

In React-Router, everything is a component. Router-router, link-link, route-route, exclusive-switch, and redirection-Redirect all exist in the form of components.

Create RouterPage. Js

import React, { Component } from "react";
import { BrowserRouter, Link, Route } from "react-router-dom";
import HomePage from "./HomePage";
import UserPage from "./UserPage";
export default class RouterPage extends Component {
	render() {
		return (
			<div> 
				<h1>RouterPage</h1> 
				<BrowserRouter> 
					<nav> 
					<Link to="/">Home page</Link> <Link to="/user">The user center</Link>
					</nav>{/* Add exact to the root route */}<Route exact path="/" component= {HomePage}/>
				<Route path="/user" component= {UserPage} />
			</BrowserRouter>
		</div>
 );
 }}
Copy the code

Route renders content in three ways

Children > Component >render

All three can receive the same [route props], including match, location, and history, but when they do not match, the children match is null.

These three methods are mutually exclusive and you can only use one of them. See the differences below

Children: func

Use scenarios: Sometimes you need to render something regardless of whether the location matches, and you can use children. It works exactly the same as render, except that the location is rendered regardless of whether it matches.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
function ListItemLink({ to, name, ... rest }) {
return (
	<Route path={to} 
		children={({ match}) = > (
		<li className={match ? "active" :""} >
		 <Link to={to} {. rest} >{name} </Link>
		</li>)} / >
 );
}
export default class RouteChildren extends Component {
	render() {
		return (
			<div> 
				<h3>RouteChildren</h3>
				<Router> 
				<ul>
					<ListItemLink to="/somewhere" name=Links to "1" />
					<ListItemLink to="/somewhere-else"name="Link 2" />
				</ul>
				</Router>
			</div>
 );
 }}
Copy the code

Render: func

But when you use render, you’re just calling a function. But like Component, it can access all of the [route props].

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
// Convenient inline rendering
ReactDOM.render( 
		<Router> 
			<Route path="/home" render={()= > <div>Home</div>} / ></Router>,
		node
);
// wrapping/composing
// Pass the route argument to your component
function FadingRoute({ component: Component,... rest }) {
return (
		<Route 
			{. rest} 
			render={routeProps= > (
				<Component {. routeProps} / >)} / >
 );
}
ReactDOM.render( <Router> <FadingRoute path="/cool" component= {Something} />
</Router>,
node
);

Copy the code

component: component

Scene: render only when location matches.

import React, {Component, useEffect} from "react";
import {BrowserRouter as Router, Route} from "react-router-dom";
export default class RouteComponePage extends
	Component {
		constructor(props) {
			super(props);
			this.state = {
				count: 0
 			};
 		}
	render() {
		const {count} = this.state;
		return (
			<div> 
				<h3>RouteComponePage</h3> 
				<button onClick={()= > {
					this.setState({count: count + 1});
 				}}>
 				click change count {count}
				</button> 
				<Router>
					<Route render={()= > <FunctionChildcount={count} />} />
	 				<Route children={()= > <FunctionChildcount={count} />} />
				</Router>
			</div>); }}class Child extends Component {
componentDidMount() {
console.log("componentDidMount"); //sy-log
 }
componentWillUnmount() {
console.log("componentWillUnmount"); //sylog
 }
render() {
return <div>child-{this.props.count}</div>; }}function FunctionChild(props) {
	useEffect(() = > {
		return () = > {
			console.log("WillUnmount"); //sy-log}; } []);return <div>child-{props.count}</div>; }
Copy the code

The use of the Router

Dynamic routing

Use: ID to define dynamic routes

Define the routing

<Route path="/search/:id" component={Search} />
Copy the code

Adding navigation links

<Link to={"/search/"+ searchId}> Search </Link>Copy the code

Create the Search component and get the parameters

import React, { Component } from "react";
import { BrowserRouter, Link, Route } from "react-router-dom";
import HomePage from "./HomePage";
import UserPage from "./UserPage";
function Search({ match, history, location }) {
	const { id } = match.params;
	return (
		<div> 
			<h1>Search: {id}</h1>
		</div>
 );
}
export default class RouterPage extends

Component {
	render() {
	const searchId = "1234";
	return (
		<div> 
			<h1>RouterPage</h1> 
			<BrowserRouter> 
				<nav> 
					<Link to="/">Home page</Link> 
					<Link to="/user">The user center</Link> <Link to={"/search/" + searchId} >search</Link>
				</nav>{/* Add exact to the root route */}<Route exact path="/" component= {HomePage}/>
				<Route path="/user" component= {UserPage} />
				<Route path="/search/:id" component= {SearchComponent} />
			</BrowserRouter>
		</div>
 );
 }}
Copy the code

Embedded routines by

Nesting of Route components within other page components creates nesting relationships.

Modify the Search component above to add new additions and details:

function DetailComponent(props) {
return <div>DetailComponent</div>; }
function SearchComponent(props) {
	console.log("props", props); //sy-log
	const {id} = props.match.params;
	return (
		<div> 
			<h3>SearchComponent</h3> 
			<p>{id}</p> 
			<Link to={"/search/" + id + "/detail"} >Detailed situation</Link> 
				<Route path="/search/:id/detail" component={DetailComponent} />
		</div>
 );
}
Copy the code