reactjs - react 路由器 : How to update component outside route on param change?

Question

当一个 url 参数改变时，我需要更新两个组件，但其中一个在带有参数的路由之外。 App.js 中的路由是这样的:

<BrowserRouter>
  <div>
       <Route exact path="/" render={ (props) =>
         <Home products={this.state.products} } 
       />
        <Route path="/products/:product" render={ (props) => 
          <Product {...props} /> } 
        /> 

        <Route path="/"  render={ props => 
            <ProductHistory {...props}/>  }
         /> 
  </div>   

</BrowserRouter> 

始终可见的 ProductHistory 具有指向产品的链接，例如:

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

当点击这样的链接时，Product 组件会使用 ComponentWillReceiveProps 方法更新:

componentWillReceiveProps(nextProps) {
    if(nextProps.match.params.product !== this.props.match.params.product){

但是如何在产品参数更改时同时更新 ProductHistory 组件？由于它不在 /products/:product 路由内，因此检查 ProductHistory 的 componentWillReceiveProps 中的 this.props.match.params.product 会导致 undefined。(编辑 - withRouter 没有帮助，因为它已经在一条路线内，但在另一条路线内:“/”)

在 componentWillReceiveProps 中，我可以使用 location.pathname 来检查路径是否以“/product”开头，并且我可以通过 substr(path.lastIndexOf('/') + 1。

编辑:但我还必须将当前 id 参数与下一个产品 id 参数进行比较，以避免不必要的更新。但是当点击链接时，当 componentWillReceiveProps 触发时 url 已经改变，所以 location.pathname 和 nextProps.location.pathname 总是匹配，所以它不必要地更新(重复的 api 调用) .

所以我必须找到不同的解决方案 - 以某种方式重新安排路由？不过，我们的想法是 ProductHistory 应该始终可见。

Answer 1

您可以像这样简单地渲染路线:

<BrowserRouter>
  <div>
  <Switch>
    <Route exact path="/" render={ (props) =>
      <Home products={this.state.products} } 
    />
    <Route path="/products/:product" render={ (props) => 
      <Product {...props} /> } 
    /> 
  </Switch>
  <ProductHistory />
  </div>
</BrowserRouter>

然后在 ProductHistory 类中使用 withRouter高级组织

You can get access to the history object's properties and the closest Route's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

例子:

class ProductHistory extends Component { ... }

export default withRouter(ProductHistory);

或者使用装饰器

@withRouter
export default class ProductHistory extends Component { ... }

有了这个，你将能够通过像这样的 Prop 访问比赛、位置和历史:

this.props.match
this.props.location
this.props.history