在 react-router-dom-v6 中，如何在 navigate() 中传递道具？ [复制]答案

【问题标题】：in react-router-dom-v6 how to pass props in navigate()? [duplicate]在 react-router-dom-v6 中，如何在 navigate() 中传递道具？ [复制]
【发布时间】：2022-01-03 04:17:53
【问题描述】：

我在我的 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}

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

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

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

导航（到，{ state={}，replace=false }）

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

import { useNavigate } from "@reach/router"

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

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

【讨论】：