react路由引數改變，重新整理頁面

需求：當頁面url從『/test?id=01』變成』/test?id=02』時，介面需要根據引數獲取最新資料並且渲染頁面。

解決方案：

方式一：react16之前推薦使用componentwillreceiveprops生命週期

import react,

from
'react'
import router from
'umi/router'
;export
class
index
extends
component
componentdidmount()
=this
.props.location.query;
this
.setstate()
}componentwillreceiveprops
(nextprops)
= nextprops.location.query;
const
=this
.state;
if(id && storageid && storageid !== id))}
}render()
}>按鈕1
<
/button>
}>按鈕2
<
/button>
<
/div>)}
}export
default index

import react,

from
'react'
import router from
'umi/router'
;export
class
index
extends
component
componentdidmount()
=this
.props.location.query;
this
.setstate()
}static
getderivedstatefromprops
(nextprops, prevstate)
= nextprops.location.query;
if(id !== prevstate.storageid)
}//不需要更新狀態，返回null
return
null
}componentdidupdate
(prevprops, prevstate)
}render()
}>按鈕1
<
/button>
}>按鈕2
<
/button>
<
/div>)}
}export
default index

關於react路由傳參跳轉後重新整理頁面引數消失

在antd專案的開發中使用的路由是react router的路由，在使用是經常出現重新整理當前頁面後引數消失導致顯示錯誤的問題 解決辦法 接收頁面 const data this.props.location.search const param data.param.substr 1,data.p...

react 打包重新整理 頁面404

參考 環境 react 16.13.1 react router dom 5.2.0 react打包前端自啟服務，使用nginx處理跨域 可以看這裡 react 開發環境 生產環境 跨域處理 將browserrouter 改為 hashrouter import from react router ...

vue router 路由傳參，重新整理頁面引數丟失

常見場景 點選列表的詳情，跳轉到詳情內頁，在內頁根據傳遞的引數獲取詳情資料。路由傳參一般有如下幾種方式，下面主要介程式設計式導航 router.push 的傳參方式 方法一 通過 params 傳參 路由配置如下 列表中的傳參 godetail row 詳情頁獲取引數 this.route.para...