Question

我正在尝试使用单独的路径，但在我的反应应用中添加/编辑表单的组件如下所示：

<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的查询字符串），我根据传递的查询参数有条件地渲染。

问题是这不会再次重新安装整个组件。假设打开了一个编辑页面，并且用户单击了添加组件，URL会发生变化，但该组件不会重新加载，因此会保留在编辑页面上。

有办法解决这个问题吗？

Answer 1

为每个路由使用不同的key应强制组件重建：

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

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

Answer 2

一种解决方案是使用内联函数和组件，每次都会渲染一个新组件，但这不是一个好主意。

像这样：

<Route exact path="/add-client" component={props => <ManageClient {...props} />}></Route>
<Route exact path="/edit-client" component={props => <ManageClient {...props} />}></Route>

更好的解决方案是，在ManageClient组件中使用componentWillReceiveProps生命周期方法。想法是每当我们为两个路由渲染相同的组件并在它们之间切换时，react将不会卸载安装组件，它基本上只更新组件。因此，如果您正在进行任何api调用或需要一些数据，请在路由更改时使用此方法。

要检查，请使用此代码，看看它会在路线更改时被调用。

componentWillReceiveProps(nextProps){
   console.log('route chnaged')
}

注意：放置条件并仅在路线更改时进行api通话。

Answer 3

<Route exact path={["/add-client", "/edit-client"]}>
  <manageClient />
</Route>

参考

版本5.2.0

https://reacttraining.com/react-router/web/api/Route/path-string-string

Answer 4

我的问题是我们之间使用了return myLibrary;路径，这导致动态路径无法正常工作

this

因此，请勿使用注释后的路径，因为代码现在可以正常工作

common

在react-router v4中使用相同的组件用于不同的路由路径

4 个答案: