React Router switch does not mount same component for different routes

Question

I have these routes defined

<Switch>
    <Route path='/1' render={() => <ComponentA />} /> 
    <Route path='/2' render={() => <ComponentA />} />
    <Route path='/3' render={() => <ComponentA />} />
</Switch>

When I hit the app on page on /1, ComponentA renders fine. But when I navigate to /2, ComponentA doesn't get remounted but the render function does fire.

If I use a different component, it will get mounted properly

ComponentA changes what to render base on props and the action to retrieve data is fired in componentDidMount

Is this the intended behavior, it would seem like that we are not suppose to reuse component for different routes

Answer 1

Just chuck a unique key on your render components - that fixed it for me.

<Switch>
   <Route path='/1' render={() => <ComponentA key={1} />} /> 
   <Route path='/2' render={() => <ComponentA key={2} />} />
   <Route path='/3' render={() => <ComponentA key={3} />} />
</Switch>