时间戳

首页 > 解决方案 > 使用反应路由器时如何将道具传递给路由

javascript - 使用反应路由器时如何将道具传递给路由

问题描述

我正在尝试将道具传递给 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 组件。现在静态数据很好，我猜同样的原则适用。

标签： javascriptreactjsroutingreact-router

解决方案

您可以通过提及道具来传递它state

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

在这里阅读更多

并且要在下一个组件中使用它，您必须使用 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//
}

推荐阅读