在react-router-dom-v6中如何在navigate()中传递道具？

Question

我在我的react-app中使用“react-router-dom-v6”进行导航，并且我有一个场景，我必须从我导航的位置传递对象或ID，如何传递对象或任何id？我尝试使用导航功能，但当我使用“useParams()”时它没有给我任何结果。

下面是我用于导航的代码

  //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}

Answer 1

我认为你还必须传递状态对象 https://reach.tech/router/api/useNavigate

如果您需要以编程方式导航（例如在表单提交后），此钩子为您提供了一个 API 来执行此操作，其签名如下：

导航（到，{状态= {}，替换= false }）

此 API 需要 React 的钩子兼容版本。

import { useNavigate } from "@reach/router"

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

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