react-router-dom refresh component when route changes

Question

I used same component for different routes. When route changes, I want the component to be rendered.

<Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/hotels" component={HotelsPage} />
    <Route path="/apartments" component={HotelsPage} />
</Switch>

When I change the route path from /hotels to /apartments, the component HotelsPage doesn't refresh.

What is the cool approach for this?

Answer 1

One of the ways you can get this sorted is by passing the props explicitly like :

<Route path="/hotels" component={props => <HotelsPage {...props} />} />

Answer 2

Firstly you can aggregate the Route into one like

<Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/(hotels|apartments)" component={HotelsPage} />
</Switch>

and secondly, your HotelsPage component is rendered both on /hotels, /apartments, it is similar case like path params, whereby the component doesn't mount again on path change, but updates thereby calling componentWillReceiveProps lifecycle function,

What you can do is implement componentWillReceiveProps like

componentWillReceiveProps(nextProps) {
    if (nextProps.location.pathname !== this.props.location.pathname) {
      console.log("here");
      //take action here
    }
  }

DEMO