What is the difference between react registered routing table component and render?

1） Routing component file

import React,{ Component } from "react";
export default class Main extends Component {
constructor(props) {
super(props);
console.log("Main Execute constructor !!!!");
}
getUserId = ()=> {
let {
match: {
params:{id}
}
} = this.props
return id
}
componentDidMount() {
let userId = this.getUserId()
console.log(' Mount complete ===',userId)
}
componentDidUpdate() {
let userId = this.getUserId()
console.log(' Update complete ===',userId)
}
render() {
console.log('render')
let userId = this.getUserId()
return (
<div>
<div> page {userId} data </div>
</div>
)
}
}
 Copy 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 perform render...')
return (
<div className="app">
app....
<div>
<button onClick={this.handleRender}> Execute the parent component render</button>
</div>
<Link to="/mylist/userA"> Show users A</Link>
<Link to="/mylist/userB"> Show users B</Link>
{/* component direct 》 Register routing table */}
<Route path="/mylist/:id" component={Main}/>
{/* component 》 The callback function registers the routing table */}
{/* <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 code

result ：

（1） component Register the routing table directly :
```
<Route path="/mylist/:id" component={Main}/>
 Copy code 
```
- When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components 】
- In this way App Components render When the method is executed again , Not cause Main Component re render , It's just update, shortcoming ： Cannot pass from parent component props To subcomponents , Routing properties can be accessed in subcomponents .
（2）component Use return Component to register the routing table ：
- Case one , The routing component does not use properties key：
```
 <Route path="/mylist/:id" component={(props)=>{
return(
<Main {...props}/>
)
}}/>
 Copy code 
```
  - When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components 】,props The parameter is the routing information of the routing component
  - This way, every time App Component re render When Main Components will perform an initialization lifecycle again , Not execution update,, But it can pass in parameters as Main Of props, You can access the routing properties , But you need to specify the input parameter in the function , The tag is then passed to the subcomponent
- The second case , The routing component uses properties key：
```
<Route path="/mylist/:id" component={(props)=>{
return(
<Main key={props.match.params.id} {...props}/>
)
}}/>
 Copy code 
```
  - When you click route switch , Trigger only 【 Mount complete 】, There is no trigger component 【 Update of components 】, You can tell that it triggered 【 Mounting of components 】,props The parameter is the routing information of the routing component
  - When App Components render When triggered , Results and no attributes key It's the same
- The third case , The routing component does not take any parameters
  
  Define a routing component Test
```
import React,{ Component } from "react";
export default class Test extends Component {
constructor(props) {
super(props);
console.log("Test Execute constructor !!!!");
}
componentDidMount() {
console.log('Test》 Mount complete ')
}
componentDidUpdate(precProp) {
console.log('Test》 Update complete ')
}
render() {
return (
<div>
<div>Test Components </div>
</div>
)
}
}
 Copy code 
```
  App The core code of the component file is as follows ：
```
 <Route path="/mylist/:id" component={(props)=>{
return(
<Test/>
)
}}/>
 Copy code 
```
  - When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components 】,props The parameter is the routing information of the routing component
  - When App Components render When triggered , Results and no attributes key It's the same
（3）Route Write the routing component directly in the tag Test
```
 <Route path="/mylist/:id">
<Test/>
</Route>
 Copy code 
```
- Click route , Don't trigger hook functions
- This way every time （ Except for the first time ）App perform render Not cause Main Rerun the initialization lifecycle , Only execute update The hook of life , You can pass... From the parent component props To subcomponents , But there is one drawback to this approach , Subcomponents cannot be in props Access routing properties
（4）render Method
```
<Route path="/mylist/:id" render={(props)=>{
return(
// <Main key={props.match.params.id} {...props}/>
<Main {...props}/>
)
}}/>
 Copy code 
```
- The routing component does not have key attribute ：
  - When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components 】,props The parameter is the routing information of the routing component
  - This way every time （ Except for the first time ）App perform render Not cause Main Rerun the initialization lifecycle , Only execute update The hook of life , You can pass... From the parent component props To subcomponents , But there is one drawback to this approach , Subcomponents cannot be in props Access routing properties
- Routing component belt key attribute ：
  - When you click route switch , Trigger 【 Mount complete 】【 The constructor of the routing component 】, There is no trigger component 【 Update of components 】, You can tell that it triggered 【 Mount complete 】,props The parameter is the routing information of the routing component
- When App Components render When triggered , Results and no attributes key It's the same