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

Posted

技术标签:

【中文标题】React-router - 如何在 React 的页面之间传递数据？【英文标题】：React-router - How to pass data between pages in 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 制作。 【参考方案1】：

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

使用&lt;Link /&gt; 组件：

<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 中我们没有用于位置我们可以在将状态传递给其他组件时使用钩子：***.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 中我们没有位置道具，我们可以使用钩子代替，同时将状态传递给其他组件以获取更多详细信息：*** .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 中提供的&lt;Link /&gt; 组件，而不是使用&lt;a&gt;&lt;/a&gt;，后者会导致整个页面重新加载，从而导致数据访问丢失。

【讨论】：

【参考方案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
))

【讨论】：

以上是关于React-router - 如何在 React 的页面之间传递数据？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 React-Router 2.5 中创建动态链接到属性

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

如何在 django 项目中使用 react-router 处理 404 错误

（通用 React + redux + react-router）如何避免在初始浏览器加载时重新获取路由数据？

React-Router：如何在路由转换之前等待异步操作

react-router 如何从数组生成路由？