1.修改react-router(v6)和类组件的跳转、传参问题 2.添加一些简单注释

src/containers/introList/index.js

@@ -1,6 +1,7 @@
 import React,{Component} from "react";
 import {  List } from 'antd';
 import axios from "axios";
+import { withRouter } from "../../utils/withRouter"
 
 // import {Link} from "react-router-dom"
 
@@ -12,28 +13,93 @@ import axios from "axios";
 //   'Los Angeles battles huge wildfires.',
 // ];
 
-class introList extends Component{
+class IntroList extends Component{
 
-  // 拿到新的id，从新把id展现在页面
-  componentWillReceiveProps(nextProps){
-    // const id = nextProps.match.params.id;
-    axios.get('http://www.dell-lee.com/react/api/list.json?id=')
+  // // 拿到新的id，从新把id展现在页面
+  // componentWillReceiveProps(nextProps){
+  //   // const id = nextProps.match.params.id;
+  //   axios.get('http://www.dell-lee.com/react/api/list.json?id=')
+  //   .then(res =>{
+  //     this.setState({
+  //       data:res.data.data
+  //     })
+  //   })
+  // }
+
+  // 把数据写活
+  // constructor(props){
+  //   super(props);
+  //   console.log('props :>> ', props)
+  //   this.state = {
+  //     data:[]
+  //   }
+  // }
+
+  // 上面这种constructor 可以简写
+  state = {
+    data: []
+  }
+
+  /**
+   * @description: 获取列表数据
+   * @return {*}
+   */  
+  fetchList() {
+    const id = this.state.id;
+    axios.get('http://www.dell-lee.com/react/api/list.json?id=' + id)
     .then(res =>{
       this.setState({
         data:res.data.data
       })
     })
   }
 
-  // 把数据写活
-  constructor(props){
-    super(props);
-    this.state = {
-      data:[]
+  /**
+   * @description: react新生命周期 (>= 16.4版本)
+   * @param {*} props
+   * @param {*} state
+   * @return {*}
+   */  
+  static getDerivedStateFromProps (props,state){
+    console.log('创建/更新阶段--设置state shouldComponentUpdate')
+
+    console.log('props :>> ', props);
+    return {
+      id: props.params.id
     }
   }
+
+  /**
+   * @description: 判断是否重新渲染的生命周期
+   * @param {*} props
+   * @param {*} state
+   * @return {*}
+   */  
+  shouldComponentUpdate(props,state){
+    console.log('更新阶段--是否重新渲染 shouldComponentUpdate')
+    if(state.id !== this.state.id){
+      return true;
+
+    }
+
+    return false;
+  }
+
+  componentDidUpdate(){
+    console.log('更新阶段--更新完成 componentDidUpdate')
+    this.fetchList();
+  }
+
+  // 从接口处拿到数据
+  componentDidMount(){
+    console.log('创建阶段--创建完成 componentDidMount')
+    console.log('state ', this.state)
+    this.fetchList();
+  }
+
   render(){
-    console.log('打印ID',this.props.match.params.id)
+    console.log('渲染阶段--渲染页面')
+    // console.log('打印ID',this.props.match.params.id)
     return(
     <List
       style={{background:'#fff'}}
@@ -52,16 +118,6 @@ class introList extends Component{
     )
   }
 
-  // 从接口处拿到数据
-  componentDidMount(){
-    const id = this.props.match.params.id
-    axios.get('http://www.dell-lee.com/react/api/list.json?id=' + id)
-    .then(res =>{
-      this.setState({
-        data:res.data.data
-      })
-    })
-  }
 }
 
-export default introList;
+export default withRouter(IntroList);

src/index.js

@@ -28,7 +28,7 @@ class App extends Component{
           <Header className='header'><AppHeader/> <Login className='login'></Login></Header>
           <Content className='content'>
             <Routes>
-              <Route path='/:id?' element={<IntroList/>}/>
+              <Route path='/:id' element={<IntroList/>}/>
               <Route path='/vip' element={<Vip/>}/>
               <Route path='/detail' element={<Detail />}/>
             </Routes>

src/utils/withRouter.js

@@ -0,0 +1,27 @@
+/*
+ * @Author: feiyu
+ * @Date: 2022-06-24 20:37:07
+ * @LastEditors: feiyu
+ * @LastEditTime: 2022-06-24 20:43:46
+ * @Description: file content
+ */
+import { useNavigate,useLocation,useParams } from 'react-router-dom';
+
+export const withRouter = (Component) => {
+  const Wrapper = (props) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const params = useParams();
+
+    return (
+      <Component
+        navigate={navigate}
+        location={location}
+        params={params}
+        {...props}
+        />
+    );
+  };
+
+  return Wrapper;
+};