Passing values through React-Router v4

by

Passing props

You can pass arbitrary props to a route via the state object:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

Then you can access the state object from within your component:

const {foo} = props.location.state

console.log(foo) // "bar"

Passing parameters

Configure your route path to accept named parameters (:id):

<Route path="/route/:id" exact component={MyComponent} />

Then you can pass URL parameters such as IDs in your link to:

<Link to={`route/foo`}>My route</Link>

You can access the parameter within your component via the match object:

const {id} = props.match.params

console.log(id) // "foo"

Sources

More Related Contents:

  1. How to push to History in React Router v4?
  2. How to pass params with history.push/Link/Redirect in react-router v4?
  3. React-router-v6 access a url parameter
  4. How to get history on react-router v4?
  5. Detecting user leaving page with react-router
  6. How to pass params into link using React router v6?
  7. React router changes url but not view
  8. React Router v4 – How to get current route?
  9. Detect Route Change with react-router
  10. Why do I get the error “expressions must have one parent element”, how do I fix this?
  11. What is the best way to redirect a page using React Router? [closed]
  12. React Router Pass Param to Component
  13. How to stop /#/ in browser with react-router?
  14. You should not use outside a
  15. react router v4 default page(not found page)
  16. react-router-dom useParams() inside class component
  17. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  18. How do you programmatically update query params in react-router?
  19. Invariant failed: You should not use outside a
  20. Nested Routes not rendering with React Router v4
  21. Using React-Router with a layout page or multiple components per page
  22. Use history.push in action creator with react-router-v4?
  23. React Router Dom v6 shows active for index as well as other subroutes
  24. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  25. React router, pass data when navigating programmatically?
  26. react routing is able to handle different url path but tomcat returns 404 not available resources
  27. Page layout broken in React Router v6
  28. react router v6 No routes matched location
  29. React Router v4 with multiple layouts
  30. Children won’t render when using a layout in ReactJS

Leave a Comment