javascript - React Js组件未更新

Question

我使用一个名为 New 的组件两次，一次为/New另一个 /Edit因为所有input此页面中应该用于编辑页面，因此我决定再次使用此组件，但在某些条件下设置数据。

路由器

<Route exact path='/New' component={New}></Route>
<Route exact path='/Edit/:id' component={New}></Route>

在两个页面中使用该组件都没有问题，但如果用户在编辑页面中，点击 navigation ，参见/New包含一些属于 /Edit 的值的页面页面，这意味着页面未正确更新，导航包含许多<Link/>

<Link to="/New"><Icon name="home"/>New Order</Link>

但是如果我使用window.location.href = "/New"而不是<Link/> ，或直接href它工作正常:

<a href="/New"></a>

那么知道如何解决这个问题吗？我想在点击 <Link/> 时更新页面.

Answer 1

如果您使用 componentDidMount 内的条件; <Link/>只需在组件之间切换，而不是重新加载和更新组件，并且您将一个组件用于两个不同的 route有一个!避免此问题的巧妙方法:

<div onClick={() => window.location.reload()}><Link to="/New"><Icon name="home"/>New Order</Link></div>

或者/

<Link onClick={this.forceUpdate} to="/New"><Icon name="home"/>New Order</Link>

__ 或 __

1. 不要使用相同的组件进行编辑

2. 强制使用 window.location.href