Search code examples
reactjsreact-routercontainers

React Router difference between component with and without function

const PATH = BASE + '/' + id;
<Route path="PATH" render={PageContainer} /> (DOESN'T WORK for the case below)
<Route path="PATH" component={PageContainer} /> (DOESN'T WORK for the case below)
<Route path="PATH" component={ () => <PageContainer /> } /> (WORKS)

Steps:
1) go to the page BASE/1
2) go back to BASE
3) go to BASE/2

PageContainer connects to the store and passes props to Page.

Why the second approach works, but the first one not?

Update:     <Route path="PATH" render={PageContainer} /> (DOESN'T WORK for the case below)
Solution

  • Try accessing it like this: 

    <Route path="PATH" component={PageContainer} />

    There is a difference between component and render props. You can find the answer here: react router difference between component and render