React-router - 如何在 React 的页面之间传递数据？答案

【问题标题】：React-router - How to pass data between pages in React?React-router - 如何在 React 的页面之间传递数据？
【发布时间】：2019-02-13 18:10:57
【问题描述】：

我正在从事一个项目，我必须将数据从一个页面传递到另一个页面。例如，我在第一页有data。

let data = [
  {id:1, name:'Ford', color:'Red'},
  {id:2, name:'Hyundai', color:'Blue'}
]

这是我使用名称呈现此数据列表的第一个组件页面。

class ListDetail extends Component {
    constructor();
    handleClick(data){
    console.log(data);
  }
  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <ul>
          {data.map((data,i) => {
            return <li onClick={this.handleClick.bind(this,data)}>{data.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

我想将此数据传递到需要此数据和更多数据的下一页。我正在使用 React Router 4。任何建议或帮助都会有所帮助。

【问题讨论】：

@Andrew 有很多方法可以做到这一点。你在使用像 Redux 这样的状态管理系统吗？如果是这样，这些数据应该存储在你的 Redux 存储中，所有路由都可以使用它。如果没有，我建议这样做——这需要一点时间来学习，但一旦你学会了，会让你的生活更轻松......
安德鲁，替代我的答案，您还可以使用React Context API 在组件之间传递数据，当它们位于树的更深处时。这是一个选项，但如果您正在处理大量数据。我建议按照 Duhaime 的建议看一下 Redux。这是一个学习曲线，但Redux on egghead.io 上的免费课程会让你做好准备。该课程由 redux 的创建者 Dan 制作。

标签： javascript reactjs react-router

【解决方案1】：

您可以使用 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
  )
}

您可以在另一个示例here 中查看如何将值与路由一起传递的示例。

【讨论】：

路由时还需要确保路由通过props。 } />
您建议使用 Redux，但据我了解，Redux 在切换 URL 时不保存值是正确的吗？
嘿@YuvalLevy，在单页面反应应用程序的上下文中，并在前端使用反应路由器管理路由，redux 管理与路由分开的状态。因此，无论路由如何，您都可以使用 redux 中的状态。当然，如果您浏览到您自己的应用之外的其他网站，那就是另外一回事了。
您还需要对您传递的参数进行 encodeURIComponent 并在接收器中为 props.match.params decodeURIComponent 进行解码。否则，如果您要传递的参数中有正斜杠，则 React不会使用 props 调用构造函数，也不会声明任何错误或控制台输出让您猜测。
此方法在 react-router-dom 版本 6 中不起作用，如果有人在搜索 React-Router-Dom v6，我将参考此答案，因为在 v6 中我们没有用于位置我们可以在将状态传递给其他组件时使用钩子：stackoverflow.com/a/68967670/7312335

【解决方案2】：

您可以使用 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/)。

【讨论】：

我们可以传递函数吗？
您将在这里遇到的问题是您正在传递对象数组，因此这意味着您无法通过 this.props.location.state.id 或其他方式在目标组件中访问它，您必须以 this.props.location.state[0].id 或 this.props.location.state[0].name 等方式访问数组对象。
OR 如果数组中有很多对象，可以使用 map 函数。
此方法在 react-router-dom 版本 6 中不起作用，因为在 v6 中我们没有位置道具，我们可以使用钩子代替，同时将状态传递给其他组件以获取更多详细信息：stackoverflow .com/a/68967670/7312335
@AmitJS94 您可以通过导入组件来传递函数，然后您可以将函数的引用作为道具传递给另一个组件，我认为状态不会从其他组件调用您的函数，而是道具会做的。留个小sn-p供大家理解：

【解决方案3】：

向目标组件传递数据的最佳方式，复制粘贴代码就知道了，我也深入讲解了。

记住：在 react-router-dom v6 中你可以使用 hooks 来代替。

版本 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>
</>
)
}

现在在第二个 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 的 hooks 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;

【讨论】：

【解决方案4】：

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

登录.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);
}

【讨论】：

【解决方案5】：

假设您的其他页面是一个组件，您可以将数据作为道具传递，该道具将在下一页上可用。不过需要注意的是，您必须使用react-router 4 中提供的<Link /> 组件，而不是使用<a></a>，后者会导致整个页面重新加载，从而导致数据访问丢失。

【讨论】：

【解决方案6】：

当你想在一个对象中发送一个页面时，你必须在你的对象文件中导入你的页面，然后再次在你的目标文件中导入你的页面：

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/>
}
];

在您的目标文件中，您必须映射您的对象...

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

【讨论】：