你可以使用react-router中的Link组件，并指定to={}作为一个对象，在该对象中你指定pathname作为要到达的路由。然后添加一个变量（例如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
})

使用上述任一选项，您现在可以访问location对象上的data，如下所示。

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

型
您可以在另一个示例here中看到如何将值与路由沿着传递的示例。

将数据传递到目标组件的最佳方法，只需复制粘贴代码，就能看到它的神奇之处，我也深入地解释了它。
**记住：**在react-router-dom v6中，您可以使用钩子。
第5.X版

假设我们有两个组件，第一个组件有指向第二个组件的链接。
链接所在的第一个组件，通过单击该链接，您将转到目标路径，在我的示例中，它是："/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>
</>
)
}

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

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共享数据。

钩子的用法：（使用位置，使用导航）

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/）。

如何在reactjs中将数据传递到另一个组件路由器
Login.jsx

handleClickSignIn(){
            console.log("come handle click fun");
            this.props.history.push( {pathname: "/welcome",
            state: { employee:"Steven" }});
      
        }

welcome.jsx

componentDidMount()
{
  console.log(this.props.location.state.employee);
}

通过导航传递数据非常简单。（到另一个组件）

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

const navigate=useNavigate()

“"“假设您需要使用navigate传递“value.id“，请尝试此操作”"”

onClick={() => {history( /userUpdate,{ state: { id: value.id } })}}

“"“然后在“用户更新”组件中=〉""”

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

const { state } = useLocation(); const { id } = state;

console.log(id)

型
“"“这里是value.id“"”

假设你的另一个页面是一个组件，你可以把数据作为一个 prop 传递给下一个页面，但需要注意的是，你必须使用react-router 4中可用的<Link />组件，而不是使用<a></a>，这会导致整个页面重新加载，从而使数据访问丢失。

当你想发送一个页面在一个对象相同的代码如下，你必须导入你的页面在你的目标文件，并再次导入你的页面在你的目标文件相同：

import Home from './componenets/home/home';
import ColdDrink from './componenets/coldDrink/coldDrink';
import HotDrink from './componenets/hotDrink/hotDrink';
import CheaseCake from './componenets/cheaseCake/cheaseCake';
import Lost from './componenets/404/lost';

const link = [
{
name   : "Cold Drink",
link   : "/ColdDrink",
router : <ColdDrink/>
},
{
name   : "Hot Drink",
link   : "/HotDrink",
router : <HotDrink/>
},
{
name   : "chease Cake",
link   : "/CheaseCake",
router : <CheaseCake/>
},
{
name   : "Home",
link   : "/",
router : <Home/>
},
{
name   : "",
link   : "",
router : <Lost/>
}
];

在你的目标文件中你必须Map你的对象...

const links = (this.props.link);
{links.map((item, i) => (
  {item.router}
))}

状态数据，当前数据在Checkout.tsx页上，传递App.tsx页上的状态数据（使用 typescript ）

checkout .tsx页面

import { useHistory } from 'react-router-dom';
 export default function CheckoutPage() {
    const history = useHistory();
    const data = [
    {
      name: "Ngoc",
      id: 1
    },
    {
      name: "Kevin",
      id: 2
    },
    {
      name: "Jack",
      id: 3
    },
  ];

   history.push({
    pathname: `/app`, /* this path field is based on your project */
    state: data ? data : [] /* pass state data to app page */,
  });
}

应用程序tsx页面

import { useLocation } from 'react-router-dom';
 export default function AppPage() {
    const history = useHistory();
    // use useLocation read data form Checkout page
    const location = useLocation<any>();
    const currentDataFromCheckoutPage = location.state;
    // data pass show here
    console.log('currentDataFromCheckoutPage', currentDataFromCheckoutPage);
}

我正在使用React路由器域****6.4.3
以下内容似乎适用于其他/早期版本，但不适用于6.4.3：

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

<Link 
  to={{
  pathname: '/details',
  state: stateObj
  }}>Learn More</Link>

进行了一个小的更改，以下内容可以替代：

<Link 
   to={'/details'}  
   state={stateObj}>Learn More</Link>

注意到state对象现在是如何在***to***对象之外的吗？
在“详细信息”（Details）页面中，您可以按如下方式接收对象：

import { useLocation } from "react-router-dom";
const DetailsPage: FC<{}> = (props) => {
  const { state } = useLocation();
  //do stuff with state obj
}

型