Question

请我在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>
    );
  }
}

Answer 1

选项1：通过状态

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

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

然后可以从该路线返回的组件上的location道具中解压缩状态。如果用户已经从其他地方导航到'/home/userDetails'，请使用防护装置，因为location和/或state可能未定义。

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

选项2：在URL中传递内容

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

然后从返回的路径组件中的match道具中检索参数。例如，如果路线如下所示：

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

然后在组件中获取ID：

props.match.params.infoId

用户可以看到此内容，但是您不必使用保护模式，因为根据定义，它将由路由定义（尽管infoID仍可以定义，如果用户键入无效的ID）。

Link to location match

Answer 2

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

示例

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

Answer 3

这是将数据传递到导航组件的方法

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

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

如果是基于类的组件。

this.props.location.state

如果是功能组件

props.location.state

如何使用React Router将数据从页面传递到另一个页面

3 个答案: