react-router-dom v6 useNavigate passing value to another component

by

version 6 react-router-dom

I know the question got answered but I feel this might be helpful example for those who want to use functional components and they are in search of passing data between components using react-router-dom v6.

Let’s suppose we have two functional components, first component A, second component B. The component A wants to share data to component B.

usage of hooks: (useLocation,useNavigate)

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

Now we will get the data in Component B.

import {useLocation} from 'react-router-dom';

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

Note: you can use HOC if you are using class components as hooks won’t work in class components.

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. Detect Route Change with react-router
  7. Simple Conditional Routing in Reactjs
  8. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  9. Invariant failed: You should not use outside a
  10. useNavigate() may be used only in the context of a component
  11. React Router Dom v6 shows active for index as well as other subroutes
  12. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  13. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  14. react app showing empty page when redirecting on production build
  15. React App goes blank after importing React-Router-Dom
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. React doesn’t reload component data on route param change or query change
  21. React router v6 how to use `navigate` redirection in axios interceptor
  22. How do you programmatically update query params in react-router?
  23. Using React-Router with a layout page or multiple components per page
  24. Use history.push in action creator with react-router-v4?
  25. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  26. Pass object through Link in react router
  27. How to generate sitemap with react router
  28. How to create dynamic route in gatsby
  29. You cannot render a inside another . You should never have more than one in your app
  30. How to remove the hash from the url in react-router

Leave a Comment