反應路由器V3 - 嵌套路由組件卸載路徑參數更改

我剛剛注意到，在反應路由器（v3.x）中，如果路徑參數更改，組件將卸載並重新裝載。這是預期的行爲？反應路由器V3 - 嵌套路由組件卸載路徑參數更改

路線：

<Route path="/landing/register/:step" component={Register}/>

現在，可以說我是在路線"/landing/register/personal-data"，我通過<Link/>或router.push({...})導航到下一個註冊步驟"/landing/register/address"，在註冊，組件獲得第一卸載再安裝一遍，鬆動所有的狀態。

這是正確的方式還是我做錯了什麼？

編輯：

看來，問題是，我使用嵌套的路線，在這裏我使用的組件父路徑。

這個例子工程（不重新安裝的路徑PARAM改變註冊金寶）：

<Route path="/landing"> 
    <Route path="register/:step" component={Register}></Route> 
</Route>

但是，當我使用的組件的父路由，它不（不重新安裝APPVIEW金寶，但註冊金寶通徑PARAM變化）：

<Route path="/landing" component={AppView}> 
    <Route path="register/:step" component={Register}></Route> 
</Route>

來源

2017-09-15 Felix Hagspiel

您可能需要更改[此答案]（https://stackoverflow.com/questions/32261441/component-does-not-remount-when-route-parameters-change）以瞭解組件如何在URL上卸載/重新安裝params change – Rowland

我認爲這會讓我走向正確的道路（請參閱我編輯的問題）。父組件'AppView'接收新的道具，並觸發重新渲染，導致重新安裝子組件。我想我必須存儲狀態elsewere，或者做'shouldComponentUpdate'的檢查 –

我在子組件嵌套途徑解決這個問題，就像這樣：

// Router class 
<Route path="/landing/register" component={Register}/> 


//Register component 

<BrowserRouter> 
    <div> 
    <Route path="/landing/register/personal-data" component={PersonalData}/> 
    <Route path="/landing/register/payment-data" component={PaymentData}/> 
    ...other routes 
    </div> 
</BrowserRouter>

但是在這種情況下，我將用戶數據存儲在redux存儲中而不是組件狀態中，但是您可以將其存儲在組件狀態中，這不是問題。

來源

2017-09-15 08:41:04

OP使用v3而不是版本4 –

更新我的問題 –

謝謝，我會試試這個！ –

反應路由器V3 - 嵌套路由組件卸載路徑參數更改

回答

相關問題