反应路由器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>

您可能需要更改[此答案]（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存储中而不是组件状态中，但是您可以将其存储在组件状态中，这不是问题。

OP使用v3而不是版本4 –

更新我的问题 –

谢谢，我会试试这个！ –

反应路由器V3 - 嵌套路由组件卸载路径参数更改

相关推荐