如何在使用react路由器<Link>时向路由传递道具

Question

我正在尝试将道具传递给Link元素的路由。但是当我打开invoiceDetails组件时，我说props是未定义的。

下面是我尝试通过道具的方法。它是正确设置的，因为它转到了InvoiceDetails组件。我在index.js中声明了路由

<Link props={{name: 'jack', age: 25, city: 'Antwerp'}}to='/InvoiceDetails'><p>VIEW</p></Link>

在InvoiceDetails组件中

import React from 'react'
import DashboardHeader from '../dashboardHeader/dashboardHeader'
import { Link } from 'react-router-dom'
function InvoiceDetails(){
console.log(props)
    return(
        <div className='w-10/12 bg-gray-300 float-right min-h-screen'>
          <div className='w-10/12 fixed z-50'>
.........
)
}
export default invoiceDetails

我想使用从全局redux状态获得的变量将属性传递给invoicedetails组件。现在静态数据很好，我想同样的原则也适用。

Answer 1

你可以通过提及state中的道具来通过它。

<Link
  to={{
    pathname: "/InvoiceDetails",
    state: { name: 'jack', age: 25, city: 'Antwerp'}
  }}
/>

阅读更多关于它的here

要在您的下一个组件中使用它，您必须使用react-router-dom HOC withRouter包装您的组件，或者使用它们提供的useLocation钩子。

EX-在第二个组件中-

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

function Child() {
 let data = useLocation();
 console.log(data); //state would be in data.state//
}