在反应路由器v4中为不同的路由路径使用相同的组件

By simon at 2018-02-28 • 0人收藏 • 46人看过

我试图有单独的路线,但添加/编辑表单中相同的组件 我的反应应用程序如下所示:

<Switch>
        <Route exact path="/dashboard" component={Dashboard}></Route>
        <Route exact path="/clients" component={Clients}></Route>
        <Route exact path="/add-client" component={manageClient}></Route>
        <Route exact path="/edit-client" component={manageClient}></Route>        
        <Route component={ NotFound } />        
</Switch>
现在在manageClient组件,我解析查询参数(我传入一个查询 字符串与编辑路由中的客户端ID),我渲染conditionally基于 查询参数通过。 问题是这不会再重新安装整个组件。说一个 编辑页面是opened,并且用户点击添加组件,URL改变, 但该组件不会重新加载,因此仍保留在编辑页面上。 一世有没有办法解决这个问题?

3 个回复 | 最后更新于 2018-02-28
2018-02-28   #1

使用不同的键应该强制组件重建:

<Route 
  exact path="/add-client"
  key="add-client"
  component={manageClient} 
/>

<Route 
  exact path="/edit-client"
  key="edit-client"
  component={manageClient} 
/>

2018-02-28   #2

使用不同的键应该强制组件重建:

<Route 
  exact path="/add-client"
  key="add-client"
  component={manageClient} 
/>

<Route 
  exact path="/edit-client"
  key="edit-client"
  component={manageClient} 
/>

2018-02-28   #3

一种解决方案是对组件使用内联函数,这将呈现一个新的 每个组件,但这不是一个好主意。 LIK电子邮件:

<Route exact path="/add-client" component={props => <ManageClient {...props} />}></Route>
<Route exact path="/edit-client" component={props => <ManageClient {...props} />}></Route> 
更好的解决方案是,使用 [* componentWillReceiveProps ](https://reactjs.org/docs/react- component.html#componentwillreceiveprops)生命周期方法在ManageClient 零件。想法是每当我们为两条路线呈现相同的组件和 在它们之间切换,那么react不会卸载挂载组件, 它基本上只会更新组件。小号o如果您正在进行任何api通话 或者需要一些数据在路线变化的这个方法中完成所有工作。 要检查,请使用此代码并查看它将在路由改变时被呼叫。
componentWillReceiveProps(nextProps){
   console.log('route chnaged')
}
*
注意:只有在路由发生变化时才能放置条件并进行api呼叫。

登录后方可回帖

Loading...