在使用Antd Pro的時候，我做了這樣一張頁面，二級模板頁，左邊是菜單，右邊是詳情

我在router.config.js文件中這樣設置路由，這邊用到了/:id去傳遞參數

 1  {
 2         path:‘/catalog‘,
 3         name:‘綜合目錄‘,
 4         icon:‘bars‘,
 5         component:‘./Catalog/Info‘,
 6         routes:[
 7           {
 8             path:‘/catalog‘,
 9             redirect: ‘/catalog/survey‘,
 
10           },
11           {
12             path:‘/catalog/survey‘,
13             component:‘./Catalog/Survey‘
14           },
15           {
16             path:‘/catalog/engineering/:id‘,
17             component:‘./Catalog/Engineering‘
18           },
19           {
20             path:‘/catalog/bidsection/:id‘,
 
21             component:‘./Catalog/Bidsections‘
22           },
23           {
24             path:‘/catalog/project/:id‘,
25             component:‘./Catalog/Project‘
26           }
27         ]
28       },

問題出現了,比如頁面初次訪問 /catalog/engineering/1 的時候頁面顯示正常無誤，但是頁面再訪問 /catalog/engineering/2 的時候頁面卻沒有重新渲染。

我通過設置斷點（debugger）了解到其實是詳情部分的子頁面沒有重新進入構造函數（ constructor(props) ），這邊需要重申一下React生命周期，你會發現有個componentWillReceiveProps。

componentWillReceiveProps在初始化render的時候不會執行，它會在Component接受到新的狀態(Props)時被觸發，一般用於父組件狀態更新時子組件的重新渲染。

因此我在子頁面裏面加了如下代碼：

1 componentWillReceiveProps = (nextProps) => {
2     const { match } = this.props;
3     if(match.params.id !== nextProps.match.params.id){
4       this.Id = nextProps.match.params.id;
5       this.getData();
6     }
7   }

這樣刷新就正常了

React 關於Antd Pro 路由參數改變 頁面沒有重新渲染刷新