React Router difference between component with and without function

Question

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)

Possible duplicate of [react router difference between component and render](https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render) — frogatto, Feb 02 '19 at 15:21

score 2 · Accepted Answer · answered Feb 02 '19 at 15:07

2

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

answered Feb 02 '19 at 15:07

Mikail Bayram

349
4
10

doesn't work } /> works – Will Graham Feb 02 '19 at 16:09
Try accessing like this: } /> – Mikail Bayram Feb 02 '19 at 16:21
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. – Will Graham Feb 04 '19 at 09:34
I need more context cants say anything from here. – Mikail Bayram Feb 06 '19 at 14:13

Hemadri Dasari · Answer 2 · 2019-02-02T15:15:42.370

2

render — A function that returns a React element. It will be called when the path matches. This is similar to component, but is useful for inline rendering and passing extra props to the element.

PageContainer is a component so should called but not like PageContainer

Change

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

To

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

In your case I recommend you to use component prop instead of render

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

edited Feb 02 '19 at 15:15

answered Feb 02 '19 at 15:09

Hemadri Dasari

32,666
37
119
162

doesn't work } /> works – Will Graham Feb 02 '19 at 16:09
@Will Graham As I explained in my answer. Component should be called like but not without < />so the following is right syntax } – Hemadri Dasari Feb 02 '19 at 16:15
I will try, thank you. If it works, I'll accept this answer – Will Graham Feb 02 '19 at 16:16
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. – Will Graham Feb 04 '19 at 09:14
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component? – Will Graham Feb 04 '19 at 09:15
Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`. – Will Graham Feb 04 '19 at 09:15
component={PageContainer} doesn't work component={()=> } works – Will Graham Feb 04 '19 at 09:16

React Router difference between component with and without function

2 Answers2