Question

我刚注意到在反应路由器（v3.x）中，如果路径参数发生更改，组件将卸载并重新装入。这是预期的行为吗？

路线：

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

现在，假设我正在路由"/landing/register/personal-data"，我正在<Link/>或router.push({...})导航到下一个注册步骤"/landing/register/address"，首先卸载Register-component然后再次安装，失去所有状态。

这是正确的方法还是我做错了什么？

修改

似乎问题在于我使用的是嵌套路由，我使用组件作为父路由。

此示例有效（不在路径参数更改时重新安装Register-Comp）：

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

但是当我使用一个组件作为父路由时，它不会（不重新安装AppView-Comp，但路径参数上的Register-Comp更改）：

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

Answer 1

我通过在子组件中嵌套路由来解决这个问题，如下所示：

// 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存储中而不是组件状态，但是您可以将它存储在组件状态，这不是问题。

React Router V3 - 在路径参数更改时卸载嵌套路径组件

1 个答案: