如何使用react-router将数据从一个页面传递到另一个页面

IT技术 javascript reactjs react-router-dom
2021-04-06 07:20:00

请我需要关于 react-router-dom 的帮助，我是图书馆的新手，从那以后似乎可以找到任何解决方案。我从 api 调用中得到三个结果，其中我映射数据以在 UI 上呈现它，现在我需要的是，如果我单击此列表之一上的一行，我希望它带我到屏幕仅显示我单击的那个单一事物的详细信息。

import React, { Component } from "react";

export default class User extends Component {
  state = { userDetails: "" };

  componentDidMount() {
    axios.get(`https://urlforapi.com`)
    .then(({ data }) => {
      this.setState({
        userDetails: data
      });
    });
  }

  render() {
    const { userDetails } = this.state;
    return (
      <div>
        {userDetails
          ? userDetails.map(info => {
              return (
                <Link to="/home/userDetails">
                  <div key={info.id}>
                    <p>{info.name}</p>
                  </div>
                  <div>
                    <p>{info.age}</p>
                  </div>
                  <div>
                    <p>{info.description}</p>
                  </div>
                </Link>
              );
            })
          : null}
      </div>
    );
  }
}
4个回答

选项 1：通过路由状态

在路由转换中发送状态。

  • 使用react-router-domv5

您可以传递映射条目独有的一些状态，例如info.id单击链接时发生的路由推送。这会混淆来自用户的数据，因为您不会将信息泄露到 ui（即浏览器）。

<Link
  to={{
    pathname: '/home/userDetails',
    state: {
      infoId: info.id,
    },
  }}
>
  • 使用react-router-domv6

链接 API 在 v6 中略有变化，state现在是一个props。

<Link
  to='/home/userDetails'
  state={
    infoId: info.id,
  }
>

然后，您可以从该location路由返回的组件上的props/对象中解压缩状态。如果用户'/home/userDetails'从其他地方导航到state可能未定义，请使用守卫。

如果通过路由props：

props.location && props.location.state && props.location.state.infoId

或者

props.location?.state?.infoId

如果使用函数组件，那么你也可以使用useLocationReact 钩子：

const { state: { infoId } = {} } = useLocation();

编辑 lucid-kowalevski-uxgs4

选项 2：在 URL 中传递一些东西

<Link to={`/home/userDetails/${info.id}`>

并从match返回的路由组件中的props中检索参数。例如，如果路线如下所示：

<Route path="/home/userDetails/:infoId" component={... } />

然后在组件中获取 id：

props.match.params.infoId

在函数组件的情况下，useParamsReact 钩子：

const { infoId } = useParams();

用户可以看到这一点，但您不必使用保护模式来访问，因为根据定义它将由路由定义（尽管infoID如果用户输入无效的 ID，仍然可以定义）。

我以为我做到了。我从react-router-dom文档中复制/粘贴了它，并将其调整为更接近您的代码，并包含了该部分的链接。我已经更新了我的答案，以包含指向正在运行的代码和框的链接。如果您在尝试访问location.state我提到的使用保护模式以确保将对象属性路径定义为您需要的状态值时看到“未定义” 。
2021-05-23 07:20:00
我似乎不明白第一个选项，你能不能展示一些关于如何在第二页上获取这些数据的代码。我试过了，当我记录我的数据时，它一直返回“未定义”。
2021-06-21 07:20:00

您可以使用 .path params 选项react-router-dom。

例子

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Topic from '../topic'

export default function App() {
  return (
    <Router>
      <div>
        <Route path="/topic/:name" component={Topic} />
      </div>
    </Router>
  );
}

传递参数：

import React, { Component } from "react";
import { Link } from 'react-router-dom'

export default class Topics extends Component {
  render() {
    return <Link to="/topic/someTopicName">Some Topic</Link>;
  }
}

访问组件中的路由器参数

import React from 'react'

export default function Topic(props) {
  return <h1>{props.match.params.name}</h1>
}

这是将数据传递给导航组件的方式

<Link
  to={{
    pathname: '/home/userDetails',
    state: {infoId: info.id},
  }}
>

并在导航组件中像这样访问

如果它是基于类的组件。

this.props.location.state

如果它是功能组件

props.location.state

如果您在 React 应用程序中使用功能组件。您可以按照以下步骤操作

主页：

<Link
  to={{
    pathname: '/your/path',
    state: { 
       data: "your data"
    },
  }}
>

在您想要路由的子页面或页面中：

使用 useLocation（版本 5.+）钩子

const emp = useLocation()

console.log(emp)

输出

{ 
   state: { 
       data: "your data" 
   } 
}
其它你可能感兴趣的问题
上一篇setState 不更新状态：ReactJS 下一篇React Material-UI 菜单锚被 react-window 列表破坏