React react-router-dom pass props to component

by

Pass it like this:

<Route 
    path="/login" 
    render={(props) => <Login {...props} isAuthenticated={isAuthenticated}/>} 
/>

It should be available by this.props.isAuthenticated in Login Component.

Reason of {...props}:

If we don’t write this then only isAuthenticated will get passed to Login component, all other values that router passes to component, will not be available inside Login component. When we write {...props} then we are passing all the values with one extra value.

And instead of using component with router use render method.

As per DOC:

Component:

When you use component (instead of render or children, below) the
router uses React.createElement to create a new React element from the
given component. That means if you provide an inline function to the
component attribute, you would create a new component every render.
This results in the existing component unmounting and the new
component mounting instead of just updating the existing component.
When using an inline function for inline rendering, use the render.

Render:

This allows for convenient inline rendering and wrapping without the
undesired remounting.

More Related Contents:

  1. React-router URLs don’t work when refreshing or writing manually
  2. Programmatically Navigate using react-router
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. How to render an array of objects in React?
  5. Pass props in Link react-router
  6. How to use Redirect in version 5 of react-router-dom of Reactjs
  7. react-router scroll to top on every transition
  8. React Router with optional path parameter
  9. Use anchors with react-router
  10. Intercept/handle browser’s back button in React-router?
  11. React Routing works in local machine but not Heroku
  12. Multiple path names for a same component in React Router
  13. React doesn’t reload component data on route param change or query change
  14. react-router getting this.props.location in child components
  15. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  16. Client Routing (using react-router) and Server-Side Routing
  17. Multiple Nested Routes in react-router-dom v4
  18. How do I reload a page with react-router?
  19. How to sync Redux state and url hash tag params
  20. onEnter not called in React-Router
  21. react-router go back a page how do you configure history?
  22. How to manually invoke Link in React-router?
  23. How to create a protected route with react-router-dom?
  24. Detect change in query param react-router-dom v4.x and re-render component
  25. Material-ui adding Link component from react-router
  26. How to use normal anchor links with react-router
  27. React router global header
  28. React: ‘Redirect’ is not exported from ‘react-router-dom’
  29. On React Router, how to stay logged in state even page refresh?
  30. How can I redirect in React Router v6?

Leave a Comment