如何使用路由器从一个组件访问传递的数据到另一个 ReactJS答案

【问题标题】：How to access passed data using router from one component to another ReactJS如何使用路由器从一个组件访问传递的数据到另一个 ReactJS
【发布时间】：2021-03-07 20:11:34
【问题描述】：

//import routes from "./routes";
import { Link, withRouter, NavLink, useHistory } from "react-router-dom";

export default function App() {
  console.log(this.props.data.data);
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
...}

slider.js中这部分代码访问上一页传递的数据变量，下面会提到

        axios
        .post(
          "/get_spec_other",
          {
            selected_country: this.props.selectedCountry,
            selected_disease: this.props.selectedDisease,
            selected_drug: this.props.selectedDrugs,
          },
          { headers: { "content-type": "application/json" } }
        )
        .then((res) => {
          const SpecificationName = Array.from(res.data);
          console.log(res.data);
          this.props.history.push({pathname: '/slider', data: res.data});

          alert(res.data);

这是我将数据传递到 /slider 并打开 slider.js 的地方。

【问题讨论】：

标签： javascript reactjs react-router onclick react-router-dom

【解决方案1】：

问题是您正在使用功能组件并期望“this”出现。它应该是这样的：（注意在 App 的函数参数中声明的 props）

//import routes from "./routes";
import { Link, withRouter, NavLink, useHistory } from "react-router-dom";

export default function App(props) {
  console.log(props.data.data);
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
...}

您需要做的另一件事是检查您是否使用了正确的挂钩来获取数据： https://css-tricks.com/the-hooks-of-react-router/

【讨论】：

TypeError: 无法读取未定义 App src/App.js:26 23 | import { Link, withRouter, NavLink, useHistory } from "react-router-dom"; 24 的属性“数据”| 25 | export default function App(props) {> 26 | console.log(props.data.data);27 | const [value1, setValue1] = useState(0); 28 | const [value2, setValue2] = useState(0); 29 | const [value3, setValue3] = useState(0);
如果我只使用console.log(props.data)，它给出未定义
你需要分析道具的来源。 console.log(props) 并查看提供了什么。也许路由器以不同的方式将数据传递给您的组件。
是的，我做到了，但它是空的
您可能想阅读：stackoverflow.com/questions/52238637/…

【解决方案2】：

谢谢！我意识到我哪里出错了，我没有将数据从父组件传递到子组件

render() {     
const { data } = this.props.location     
console.log(data); ...
}

return ( 
....  
<App data={data}/> 
...
}

export default function App(data) {   
//const { data } = props.location   
console.log(data); 
......
}

【讨论】：