How to re-render the same component being used in different routes?

Question

I have several routes rendering the same component. Depending on the route I want the component to fetch different data. However since I keep rendering the same component, React doesn't see any changes to the DOM when I click a Link tag (from my nav bar located in the Layout component) to another route rendering that same component. Meaning the component is not re-rendered with the new data. Here are my routes:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Provider store={store}>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/fashion" component={PostTypePageContainer} />
              <Route exact path="/beauty" component={PostTypePageContainer} />
            </Switch>
          </Layout>
        </Provider>
      </BrowserRouter>
    );
  }
}
export default App;

Here is the PostTypePageContainer component that I want to re-render with the new data each time:

class PostTypePageContainer extends Component {
  componentDidMount() {
    let route;
    switch (this.props.location.pathname) {
      case '/fashion':
        route = '/fashion';
        break;
      case '/beauty':
        route = '/beauty';
        break;
      default:
        console.log('No data was found');
    }

    let dataURL = `http://localhost:8888/my-site//wp-json/wp/v2${route}?_embed`;
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.props.dispatch(getData(res));
      });
  }

  render() {
    let posts = this.props.postData.map((post, i) => {
      return <PostTypePage key={i} props={post} />;
    });
    return <div>{posts}</div>;
  }
}

const mapStateToProps = ({ data }) => ({
  postData: data.postData
});

export default connect(mapStateToProps)(PostTypePageContainer);

How do I go about re-rendering that component each time?

Answer 1

This is intended behavior of react-router.

While i suggest you create a HOC to fetch the data from different locations and pass it to the PostTypePageContainer via props, using a key will give you a quick work around that will cause your component to remount.

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Provider store={store}>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact key={uniqueKey} path="/fashion" component={PostTypePageContainer} />
              <Route exact key={someOtherUniqueKey} path="/beauty" component={PostTypePageContainer} />
            </Switch>
          </Layout>
        </Provider>
      </BrowserRouter>
    );
  }
}
export default App;

Source: https://github.com/ReactTraining/react-router/issues/1703