Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

in react-router-dom-v6 how to pass props in navigate()?

I am using "react-router-dom-v6" for navigation in my react-app, and I have scenario where I have to pass object OR Id from where I navigate how to pass an object or any id ? I tried with navigate function but it gives me nothing when I am use " useParams() ".

below is code that I am using for navigation

  //page from where I navigate>>>

    const navigate = useNavigate();

    const on Press Edit = (item)=>{
  //here item is object containing {name, id, email, number}
        console.log('edit..', item)
        navigate("/editemployee", { id: "25", item :item })
      }
      
      
  //page I navigated

    const params = useParams();
      const location = useLocation();
      
      console.log('params', params, location)
      
  //op>>
    //params: prototype object
    // 
    //location: {hash: ""
    //key: "kixzun7e"
    //pathname: "/editemployee"
    //search: ""
    //state: null}

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

I think you have to pass the state object also
https://reach.tech/router/api/useNavigate

If you need to navigate programmatically (like after a form submits), this hook gives you an API to do so with a signature like this:

navigate(to, { state={}, replace=false })

This API requires a hook-compatible version of React.

import { useNavigate } from "@reach/router"

const AnalyticTracker = (props) => {
  const navigate = useNavigate();

  return (
    <form onSubmit={() => navigate('/something', { replace: true, state: {} })}>
      {...}
    </form>
  )
)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading