Teach you about react routing in five minutes

// Component update mechanism:
// As long as the parent component is re-rendered, all component subtrees will also be updated // Performance optimization // 1. Reduce state

// 2. Avoid unnecessary re-rendering (performance optimization)
// shouldComponentUpdate(nextProps, nextState) { .... }
// The hook function returns a Boolean value, true to update, false not to update // Manual implementation is possible, but too troublesome // 3. The actual official website provides a pure component, which has already implemented the shouldComponentUpdate logic for you // It will help you compare props and state to decide whether to update // Ordinary component: class App extends React.Component
// Pure components: class App extends React.PureComponent will have an additional data comparison process compared to ordinary components. // For example: if a component needs to be rendered, the performance loss is very large. At this time, you can consider pure components to avoid some meaningless updates. // Not all scenarios require pure components. Normally, ordinary components should be used. import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.PureComponent {
  state = {
    nameList: ['Shuai Peng', 'Lü Bu', 'Zhang Fei'],
    currentName: '',
  }
  render() {
    console.log('App-render')
    return (
      <div>
        <h1>I am an App component</h1>
        <h3>Result: {this.state.currentName}</h3>
        <button onClick={this.handleClick.bind(this)}>Roll out the name</button>
      </div>
    )
  }
  handleClick() {
    const randomIndex = parseInt(Math.random() * this.state.nameList.length)
    const currentName = this.state.nameList[randomIndex]

    this.setState({
      currentName,
    })
    console.log(currentName)
  }

  // Requirement: If the value of state has not changed, it does not need to be updated to avoid unnecessary updates // shouldComponentUpdate(nextProps, nextState) {
  // if (this.state.currentName === nextState.currentName) {
  // return false
  // } else {
  // return true
  // }
  // }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

// 4. Notes on the use of pure components (if a pure component has subcomponents, the subcomponents must also be pure components (all pure components))
// (1) A pure component performs a shallow comparison internally, so value types are fine, and complex types only compare addresses // (2) When using a pure component and updating data, simple types are fine, but when complex types are updated, the address needs to be modified (new object/new array)

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.PureComponent {
  state = {
    nameList: ['Shuai Peng', 'Lü Bu', 'Zhang Fei'],
    currentName: '',
    obj: {
      name: 'zs',
      age: 18,
    },
  }
  render() {
    console.log('App-render')
    return (
      <div>
        <h1>I am an App component</h1>
        <p>name: {this.state.obj.name}</p>
        <p>{this.state.nameList}</p>
        <button onClick={this.handleClick.bind(this)}>Change value</button>
      </div>
    )
  }
  handleClick() {
    // To update the object, prepare a new object // const obj = { ...this.state.obj }
    // obj.name = 'ls'
    // this.setState({
    // obj: obj,
    // })
    // To update the array, prepare a new array // this.setState({
    // nameList: [...this.state.nameList, '王五'],
    // })
    const arr = [...this.state.nameList]
    arr.push('Wang Wu')
    this.setState({
      nameList: arr,
    })
  }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Link, Route } from 'react-router-dom'

// Routing usage:
// 1. Download yarn add react-router-dom
// 2. react-router-dom is a package that contains many components // 3. HashRouter component, is the entire routing object, one for a project, needs to wrap the content of the entire project // 4. Link component, rendered into a link, can be used for routing jump, configure the path through to // 5. Route component, configure routing rules (which path matches which component), is also the routing outlet!
// Each Route is independent of each other. As long as the path matches, the configured component can be displayed. // Define three function components const Home = () => <div>I am the Home component</div>
const Login = () => <div>I am the Login component</div>
const User = () => <div>I am a User component</div>

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>I am an App component</h1>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/login">Login</Link>
          </li>
          <li>
            <Link to="/user">User</Link>
          </li>
        </ul>

        {/* As long as the path matches the path in the address bar, the configured component will be displayed*/}
        <Route path="/home" component={Home}></Route>
        <Route path="/login" component={Login}></Route>
        <Route path="/user" component={User}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <HashRouter>
    <App></App>
  </HashRouter>,
  document.getElementById('root')
)

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Link, Route } from 'react-router-dom'

// Router component, there are two types: HashRouter and BrowserRouter
// 1. HashRouter's underlying implementation is based on: the hash value of the address bar, based on anchor jump implementation // 2. BrowserRouter's underlying implementation is based on: h5's history API, the address bar does not have#
// (If you want to use it for development, there is no problem, but when it goes online, background configuration is required)

// Define three function components const Home = () => <div>I am the Home component</div>
const Login = () => <div>I am the Login component</div>
const User = () => <div>I am a User component</div>

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>I am an App component</h1>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/login">Login</Link>
          </li>
          <li>
            <Link to="/user">User</Link>
          </li>
        </ul>

        {/* As long as the path matches the path in the address bar, the configured component will be displayed*/}
        <Route path="/home" component={Home}></Route>
        <Route path="/login" component={Login}></Route>
        <Route path="/user" component={User}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, NavLink, Route } from 'react-router-dom'
import './index.css'

// Link component and NavLink component // 1. Link component, rendered as a link, used for route jump, configured path through to // The default Link will not have a highlighted class name // 2. NavLink component, rendered as a link, used for route jump, configured path through to // (1) NavLink, when the path matches, will have a highlighted class name active
// (2) You can use activeClassName to configure the highlighted class name // (3) You can use activeStyle to directly configure the tag and highlight style // (4) Fuzzy matching to="/home" can match /home /home/aa
// Exact match, need to configure the exact attribute, to="/home", can only match /home, will only highlight /home // Define three function components const Home = () => <div>I am the Home component</div>
const Login = () => <div>I am the Login component</div>
const User = () => <div>I am a User component</div>

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>I am an App component</h1>
        <ul>
          <li>
            <NavLink
              exact
              to="/"
              activeStyle={{ color: 'red', fontSize: '30px' }}
            >
              Home</NavLink>
          </li>
          <li>
            <NavLink to="/login" activeClassName="selected">
              Login</NavLink>
          </li>
          <li>
            <NavLink to="/user" activeClassName="selected">
              User</NavLink>
          </li>
        </ul>

        {/* As long as the path matches the path in the address bar, the configured component will be displayed*/}
        <Route path="/home" component={Home}></Route>
        <Route path="/login" component={Login}></Route>
        <Route path="/user" component={User}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

/**index.css*/
.active {
  color: red;
  font-size: 30px;
}
.selected {
  color: blue;
  font-size: 30px;
}

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, NavLink, Route, Switch } from 'react-router-dom'
import './index.css'

// Route component // Function: You can configure routing rules, which is also the export of routing. As long as the path matches, the configured component will be displayed here // <Route path="/login" component={Login}></Route>
// 1. Each Route is independent of each other (including configuring multiple identical paths and displaying different components, which is also possible)
// 2. The path configured by Route is also fuzzy matched, and can be accurately matched by exact // 3. If the path is not configured, the configured components will be displayed by default // Will cooperate with the Switch component to complete the configuration of the 404 page // Switch component: You can wrap multiple Route components, so that the first matching Route component can be displayed, and the subsequent ones will not be displayed // Defined function component const Home = () => <div>I am the Home component</div>
const Login = () => <div>I am the Login component</div>
const User = () => <div>I am a User component</div>
const Error = () => <div>I am a 404 page. The page you want to access does not exist!!!</div>

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>I am an App component</h1>
        <ul>
          <li>
            <NavLink
              exact
              to="/"
              activeStyle={{ color: 'red', fontSize: '30px' }}
            >
              Home</NavLink>
          </li>
          <li>
            <NavLink to="/login" activeClassName="selected">
              Login</NavLink>
          </li>
          <li>
            <NavLink to="/user" activeClassName="selected">
              User</NavLink>
          </li>
        </ul>

        {/* As long as the path matches the path in the address bar, the configured component will be displayed*/}
        <Switch>
          <Route path="/" component={Home} exact></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/user" component={User}></Route>
          <Route component={Error}></Route>
        </Switch>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

import React from 'react'
import ReactDOM from 'react-dom'
import {
  HashRouter as Router,
  NavLink,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom'
import './index.css'

// Redirect component: can redirect, from where to jump to where // In react, it is very simple to configure nested routes. You only need to write Route components directly where you need to write nested sub-routes // Prerequisite: the path of the nested sub-routes you configure must include the path of the parent route // Defined function component const Home = () => (
  <div>
    <h3>I am the Home component</h3>
  </div>
)
const Login = () => (
  <div>
    <h3>I am the Login component</h3>
  </div>
)
// ------------------------------------------------------------------------
// Requirement: Inside the User component, there is also personal information and my collection const User = () => (
  <div>
    <h3>I am a User component</h3>
    <Route path="/user" exact component={UserDefault}></Route>
    <Route path="/user/info" component={Info}></Route>
    <Route path="/user/star" component={Star}></Route>
  </div>
)
const UserDefault = () => <div>I am the default User content</div>
const Info = () => <div>I am the Info component</div>
const Star = () => <div>I am the Star component</div>

// -------------------------------------------------------------------------
const Error = () => <div>I am a 404 page. The page you want to access does not exist!!!</div>

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>I am an App component</h1>
        <ul>
          <li>
            <NavLink
              exact
              to="/"
              activeStyle={{ color: 'red', fontSize: '30px' }}
            >
              Home</NavLink>
          </li>
          <li>
            <NavLink to="/login" activeClassName="selected">
              Login</NavLink>
          </li>
          <li>
            <NavLink to="/user" activeClassName="selected">
              User</NavLink>
          </li>
        </ul>

        {/* As long as the path matches the path in the address bar, the configured component will be displayed*/}
        <Switch>
          <Route path="/" component={Home} exact></Route>
          <Redirect from="/home" to="/"></Redirect>
          <Route path="/login" component={Login}></Route>
          <Route path="/user" component={User}></Route>
          <Route component={Error}></Route>
        </Switch>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import './index.css'

// If you want to get the parameter information of dynamic routing, you need to get it through props,
// Route will pass route-related information and methods to your component through props // const Product = (props) => <div>I am a product component</div>

class Product extends React.Component {
  render() {
    // this.props parameter // (1) history stores the method of jumping to the route // (2) location stores the current route address // (3) match stores the dynamic route parameters console.log(this.props)
    console.log(this.props.match.params.id)
    return (
      <div>
        <h3>I am a product component - {this.props.match.params.id}</h3>
        <button onClick={this.handleClick.bind(this)}>Back to home page</button>
      </div>
    )
  }
  handleClick() {
    // console.log(this.props.history)
    // this.props.history.go(-1)
    this.props.history.push('/home')
  }
}

const Home = () => <div>This is the home page</div>

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>I am an App component</h1>
        <div>
          <Link to="/home">Home</Link>
          <Link to="/product/1">Product 1</Link>
          <Link to="/product/2">Product 2</Link>
          <Link to="/product/3">Product 3</Link>
          <Link to="/product/4">Product 4</Link>
        </div>
        <Route path="/product/:id" component={Product}></Route>
        <Route path="/home" component={Home}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)