如何在页面之间传递数据？

Question

我正在进行项目,我必须将数据从一个页面传递到另一个页面.例如,我在第一页上有数据

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>
    );
  }
}

我想将这些数据传递到下一页,我需要这些数据和更多的数据.我正在使用反应路由器4.任何建议或帮助都会有所帮助.

Answer 1

将数据传递到目标组件的最佳方法，只需复制粘贴代码即可看到神奇之处，我也对其进行了深入解释。

请记住：在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的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;

Answer 2

您可以使用react-router中的链接组件,并指定to={}为将路径名指定为要转到的路径的对象.然后添加一个变量,例如data,保存您想要传递的值.请参阅下面的示例.

使用<Link />组件:

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

运用 history.push()

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

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

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

您可以在此处查看如何在另一个示例中传递值和路由的示例.

可以在下面找到来自React Router文档的更多信息:
Link compoment
history object

国家管理工具.

当您将大量数据/道具传递给其他组件/页面时.您可能需要考虑使用库来管理您的状态.两个流行的是Redux和MobX.

Answer 3

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

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

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

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

Answer 4

我正在使用react-router-dom 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对象之外的？

在详情页面，您可以通过以下方式接收对象：

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