React-router: Route doesn't send extra props to component, render, ...

[oxyno-zeta]

Version

4.0.0

Test Case

I don't know if it is a bug or a wish but the actual Route component doesn't send extra Route props to component, render, ...

<Route isAuthenticated={true} component={List} />

In List, I doesn't see "isAuthenticated". Only React-router props.

Is it normal ?

Steps to reproduce

See in the code : https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js
Line 101.

Other information

The docs is in relation to send it : https://reacttraining.com/react-router/web/example/auth-workflow.

Thanks,

Oxyno-zeta

[timdorr]

Yes, this is as intended. <Route> only knows about the props it's configured to know about.

[oxyno-zeta]

Ok thanks.
But maybe change the documentation website (Auth example). For me, this example show a non possible way of work !

Thanks for the quick response !

Oxyno-zeta

[timdorr]

I'm not sure what you mean. There are no unsupported props on any Route in that example. The code from every example is running live in your browser, so if it wasn't written correctly, it wouldn't run.

[v12]

@timdorr how do you pass props down to an underlying component then?

Example:

const Example = ({ section }) => <div>This is section <em>{section}</em></div>

<Route
  path="/example"
  component={Example}
  section="Test Property Value"
/>

Lets assume all the components are pure and there is no single storage (like Redux) from which you can access the value (i.e., using HOC). I have no idea how to do it now.

It worked until, if I'm not mistaken, beta.7 and non-redux-router properties were passed down to the component. :)

[pshrmn]

@v12 Use render.

<Route path='/example' render={(props) => <Example {...props} section="Test Property Value" />}/>

[v12]

@pshrmn makes sense, thanks! 👍

[oxyno-zeta]

Thanks @pshrmn !