What is a state in component of React Router?

by

It’s a piece of information that you’d like to send to the next page. Nothing to do with Redux. It’s a plain object. I believe Flipkart is a very nice example of how it can be used to improve user experience:

  • Go to a Flipkart search page on a mobile device (or simulate one using Chrome DevTools)
  • Tap on one of the items

You’ll see that the transition happens instantly and pieces of information like product images, title, rating and price are readily available on the product page. One way to implement that is passing the state they had already loaded on the search page onto the next one:

<Link
  to={`/product/${id}`}
  state={{
    product,
  }}
/>

And then:

function ProductPage(props) {
  // Always check because state is empty on first visit
  if (props.location.state.product) {
    console.log(props.location.state.product);
    // { id: '...', images: [...], price: { ... } }
  }
}

More Related Contents:

  1. Alternate way for optional parameters in v6
  2. How to get query parameters in react-router v4
  3. Can I set a base route in react-router
  4. How do I add an active class to a Link from React Router?
  5. Forcing a React-Router to load a page, even if we’re already on that page
  6. getting 404 for links with create-react-app deployed to github pages
  7. Refresh previous screen on goBack()
  8. React Router: Cannot read property ‘pathname’ of undefined
  9. is there a way to set a default route with React-Router v6
  10. Nested Routes in React Router v4
  11. How to test components using new react router hooks?
  12. How to Access History Object Outside of a React Component
  13. Using Jest to test a Link from react-router v4
  14. isActive style in react-router v.6
  15. Nested routes with react router v4 / v5
  16. react router v6 navigate outside of components
  17. Problem in redirecting programmatically to a route in react router v6
  18. react router difference between component and render
  19. React react-router-dom pass props to component
  20. Active link with React-Router?
  21. Using anchor tags in react-router 4
  22. React-Router open Link in new tab
  23. How to hide navbar in login page in react router
  24. React-router: How to manually invoke Link?
  25. How to set up Google Analytics for React-Router?
  26. React-router – How to pass data between pages in React?
  27. useNavigate() may be used only in the context of a component
  28. Performing Authentication on Routes with react-router-v4
  29. Children won’t render when using a layout in ReactJS
  30. How can I redirect in React Router v6?

Leave a Comment