1) Routing component files

import React,{ Component } from "react"; export default class Main extends Component { constructor(props) { super(props); Console. log("Main executes constructor!!!!" ); } getUserId = ()=> { let { match: { params:{id} } } = this.props return id } componentDidMount() { let userId = this.getUserId() Console. log(' Mount completed ===',userId)} componentDidUpdate() {let userId = this.getUserId() console.log(' Update completed ===',userId)} Render () {console.log('render') let userId = this.getUserId() return (<div> <div> page {userId} data </div> </div>)}}Copy the code

2) App component files

import React,{ Component } from "react"; import { Link,Route,Switch,Redirect } from "react-router-dom"; import "./App.css"; import Main from "./components/Main"; Export Default Class App extends Component {state = {count:0} handleRender = ()=> {console.log(' Will render parent Component ') This.setstate ({count: this.state + 1})} render(){console.log('App render... ') return ( <div className="app"> app.... <div> <button onClick={this.handleRender}> execute parent component render</button> </div> <Link to="/mylist/userA"> display userA </Link> <Link To ="/mylist/userB"> display userB </Link> {/* component directly "register routing table */} <Route path="/mylist/:id" component={Main}/> {/* component } {/* <Route path="/ myList /:id" Component ={(props)=>{return(// <Main key={props.match-params.id} {... props}/> <Main {... props}/> ) }}/> */} {/* <Route path="/mylist/:id" render={(props)=>{ return( // <Main key={props.match.params.id} {... props}/> <Main {... props}/> ) }}/> */} <Redirect to="/mylist/userA"/> </div> ) } }Copy the code

Results:

  • (1) Component register routing table directly:

    <Route path="/mylist/:id" component={Main}/>
Copy the code

    • When clicking route switch, only [update of component] is triggered, but [Mount complete] of component is not triggered, so we can know that [update of component] is triggered.

    • This method does not cause the Main component to re-render when the render method of the App component is executed, but only updates the Main component. Disadvantages: you cannot pass props from the parent component to the child component, you can access routing properties in the child component.

  • (2) Component uses return to register the routing table:

    • In the first case, the routing component does not use the property key:

      <Route path="/mylist/:id" component={(props)=>{ return( <Main {... props}/> ) }}/>Copy the code

      • When clicking the route switch button, the props parameter is the routing information of the routing component. If the props parameter is not triggered, the props parameter is the routing information of the routing component

      • This would cause the Main component to re-initialize the lifecycle each time the App component rerenders, instead of performing an update, but it could pass in an input parameter as props of Main, which could access routing properties, but it would need to specify the input parameter in the function and then pass the tag to the child component

    • In the second case, the routing component uses the property key:

      <Route path="/mylist/:id" component={(props)=>{ return( <Main key={props.match.params.id} {... props}/> ) }}/>Copy the code

      • When clicking the route switch button, the props parameter is the routing information of the routing component. If the props parameter is props, the props parameter is the routing information of the routing component

      • When the App component Render fires, the result is the same as without the attribute key

    • In the third case, the routing component takes no parameters

      Define a routing component, Test

      import React,{ Component } from "react"; export default class Test extends Component { constructor(props) { super(props); Console. log("Test executes constructor!!!!" ); } componentDidMount() {console.log(precProp) {console.log(precProp) {console.log(precProp) {console.log(precProp)} render() { Return (<div> <div>Test component </div> </div>)}}Copy the code

      The core code of App component file is as follows:

        <Route path="/mylist/:id" component={(props)=>{
     return(
     <Test/>
 )
 }}/>
Copy the code

      • When clicking the route switch button, the props parameter is the routing information of the routing component. If the props parameter is not triggered, the props parameter is the routing information of the routing component

      • When the App component Render fires, the result is the same as without the attribute key

  • (3) The Route component Test is directly written in the Route tag

      <Route path="/mylist/:id">
      <Test/>
  </Route>
Copy the code
    • Clicking route does not trigger the hook function
    • This way every time (except the first time)AppperformrenderWill not result in aMainRe-executing the initialization life cycle only executesupdateThe life hook can be passed from the parent componentpropsTo the child component, but this approach has a disadvantage, the child component cannot inpropsAccess route attributes

  • (4) render method

    <Route path="/mylist/:id" render={(props)=>{ return( // <Main key={props.match.params.id} {... props}/> <Main {... props}/> ) }}/>Copy the code

    • Routing component without key property:

      • When clicking the route switch button, the props parameter is the routing information of the routing component. If the props parameter is not triggered, the props parameter is the routing information of the routing component

      • This method does not cause Main to re-execute the initialization lifecycle each time App render executes (except the first time). Instead, it executes the update lifecycle hook. It can pass props to children from the parent component, but there is a drawback to this method

    • Routing components with key attributes:

      • When clicking route switch, trigger [Mount the complete】 【Constructor of the routing component], no trigger component [Component updates], can be known to trigger [Mount the complete】,propsThe parameter is the routing information of the routing component

    • When the App component Render fires, the result is the same as without the attribute key