您可以使用 react-router 中的 Link 组件，并将 to={ 指定为对象，其中指定路径名作为要转到的路线。然后添加一个变量（例如 data ）来保存您想要传递的值。请参阅下面的示例。

使用 <Link /> 组件：

<Link
  to={{
    pathname: "/page",
    state: data // your data array of objects
  }}
>

使用 history.push()

this.props.history.push({
  pathname: '/page',
    state: data // your data array of objects
})

使用上述任一选项，您现在都可以按照页面组件中的以下内容访问位置对象上的 data 。

render() {
  const { state } = this.props.location
  return (
    // render logic here
  )
}

您可以在 此处 中看到另一个示例中如何随路由传递值的示例。

将数据传递给目标组件的最佳方式 ，只需复制粘贴代码并见证奇迹，我也对其进行了深入解释。

记住： 在 react-router-dom v6 中，您可以改用钩子。

版本 5.X

假设我们有两个组件，第一个和第二个。第一个具有指向第二个组件的链接。

第一个 Component 包含链接，通过单击链接，您将转到目标路径，在我的情况下它是： "/details" 。

import React from 'react';
import {Link} from 'react-router-dom';

export default function firstComponent() {
return(
<>
    <Link to={{
      pathname: '/details',
      state: {id: 1, name: 'sabaoon', shirt: 'green'}
    }} >Learn More</Link>
</>
)
}

现在在第二个 Component 中，您可以按如下方式访问传递的对象：

import React from 'react'


export default class Detials extends React.Component{

    constructor(props){
        super(props);
        this.state={
            value:this.props.location.state,
        }

    }


alertMessage(){
       console.log(this.props.location.state.id);
    }

render(){
return (

    <>
     {/* the below is the id we are accessing */}

      hay! I am detail no {this.props.location.state.id} and my name is 
      {this.props.location.state.name}

      <br/>
      <br/>

 {/* press me to see the log in your browser console */}
<button onClick={()=>{this.alertMessage()}}>click me to see log</button>

    </>

    )
}

}

注意 ：在 react-router-dom 的第 6 版中，上述方法不适用于类组件，尽管您可以使用 useLocation 钩子使​​用 react 的功能组件，然后您可以通过该位置在另一个组件中绘制状态对象。

第 6 版

如何使用 react-router-dom 的钩子 v6 实现相同功能

假设我们有两个功能组件，第一个组件 A，第二个组件 B。组件A想要分享数据给组件B。

钩子的用法： （useLocation,useNavigate）

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

现在我们去获取组件B中的数据。

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

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

您可以使用 react-router 的 Link 组件并执行以下操作：

<Link to={{
  pathname: '/yourPage',
  state: [{id: 1, name: 'Ford', color: 'red'}]
}}> Your Page </Link>

然后使用 this.props.location.state 访问数据

您还可以考虑在整个应用程序中使用 redux 进行状态管理（ https://redux.js.org/ ）。