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

Question

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}

score 5 · Accepted Answer · answered Jan 03 '22 at 04:35

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>
  )
)

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

1 Answers1