如何在 React JS 中打开一个新页面并在它们之间传递数据

Question

我正在升级我的项目的搜索栏。我希望当我按下其中一个结果时会打开一个新页面，其中包含所选对象的所有数据。这是在链接中显示搜索结果的函数代码，理论上，当我按下名称时，我应该转到将对象传递给新页面的页面。

{
  filteredData.length != 0 && (
    <div className="dataResult">
      {filteredData.slice(0, 3).map((obj, key) => {
        return (
          <Link
            className="dataItem"
            to={{ pathname: "/SelectedObj", state: obj }}
          >
            {obj.Name}
          </Link>
        );
      })}
    </div>
  );
}

所以这部分代码可以工作，但是新页面没有任何结果，我无法理解如何访问我传递给新页面的对象。这里是新页面的代码。

function SelectedUser() {
  return <h1>Hello world</h1>;
}

我不明白的是为什么它没有向我显示 Hello world，除了如何访问传递的对象。

编辑：我检查过，但忘记更新路由部分。现在一切正常，谢谢。

Answer 1

要访问传递给新页面的对象，

使用 useLocation 钩子，它是一个返回包含有关当前 URL 信息的位置对象的函数。每当 URL 发生变化时，都会返回一个新的位置对象。

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

    function SelectedUser() {
    const location = useLocation();
    console.log(location.state);

        return (
          <h1>Hello world</h1>
       )
    }

Answer 2

使用道具从父母到孩子

试想一下app的目录结构如下：父组件实际渲染app中的子组件。

App
 └── Parent
   ├── Child1
   └── Child2

这是 React 中最简单最基本的数据流向。

class Parent extends React.Component {state = { data : "Hello World" } 
render() {
        
        return (
            <div>
                 <Child1/>            //no data to send             
                 <Child2 dataFromParent = {this.state.data} />
            </div>
        );    }
}

使用变量this.props.dataFromParent获取父子传递的数据。

class Child2 extends React.Component {
 render() {
         
         return (
             <div>
                 Data from parent is:{this.props.dataFromParent}
             </div>
         );
     }
 }

使用回调从子级到父级

假设您想从 child1 向父母发送一条消息，其中包含“你好，你好吗？”的消息。采取以下步骤：

在 Parent.js 中，设置一个回调函数以接收您从子级访问的参数。 将回调函数作为 props 发送给 child1.js。

class Parent extends React.Component {
state = { message: "" }
callbackFunction = (childData) => {
      this.setState({message: childData})
},


 render() {
        return (
            <div>
                 <Child1 parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
}
}

在 child1.js 中使用 this.props.callback(dataToParent) 传递您的数据。

class Child1 extends React.Component{sendData = () => {
         this.props.parentCallback("Hey Popsie, How’s it going?");
    },

render() { 
//Any time you wish to send data from child to parent component, call the sendData function.
    }
};

Answer 3

链接

<Link to={"dataitem"}
    state={{ state : "value" }}
>Navigate</Link>

并在数据项页面中使用 useLocation 来获取这样的数据

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

   const location = useLocation();

   console.log(location.state);