React router: How to update component outside route on param change?

Question

When a url param change, I need to update two components, but one of them is outside the route with the param. The routes in App.js are like this:

<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> 

The ProductHistory which is always visible has links pointing to products, like:

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

When following such a link, the Product component is updated using ComponentWillReceiveProps method:

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

But how do I update the ProductHistory component at the same time when the product param change? Since it isn't within the /products/:product route, checking this.props.match.params.product in ProductHistory's componentWillReceiveProps results in undefined. (edit - and withRouter doesn't help, since it already is within a route, but a different one: "/")

In componentWillReceiveProps I could use location.pathname to check that the path begins with "/product", and I could find the param by substr(path.lastIndexOf('/') + 1.

Edit: But I also have to compare the current id param with the next product id param to avoid unnecessary updates. But when clicking the link, the url have already changed when componentWillReceiveProps fires so location.pathname and nextProps.location.pathname always match, so it updates unnecessarily (repeated api calls).

So I would have to find a different solution - rearrange the routing in some way? The idea is that ProductHistory should always be visible though.

Answer 1

You can render the Route simply like this:

<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>

And then in the ProductHistory class you use the withRouter HOC

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.

example:

class ProductHistory extends Component { ... }

export default withRouter(ProductHistory);

or using decorators

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

With this you will be able to access match, location and history through props like this:

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