javascript - 如何使用 react 路由器将数据从一个页面传递到另一个页面

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:通过路线状态
在路由转换中发送状态。

使用 react-router-dom v5
声明式导航 - Link to
您可以传递映射条目独有的一些状态，例如 info.id以及单击链接时发生的路由推送。这会混淆来自用户的数据，因为您不会将信息泄露到 ui(即浏览器)。

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

命令式导航 - useHistory hook

  const history = useHistory();

  ...

  history.push({
    pathname: '/home/userDetails',
    state: { infoId: info.id },
  });

使用 react-router-dom v6
声明式导航 - Link或 Navigate成分
链接 API 在 v6 中有所改变，state现在是 Prop 。

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

或使用 Navigate组件，v5 Redirect 的精神继承者/替代品零件

  <Navigate
    to="/home/userDetails"
    state={{ infoId: info.id }}
  />

命令式导航 - useNavigate hook

  const navigate = useNavigate();

  ...

  navigate('/home/userDetails', { state: { infoId: info.id } });

然后你可以从 location 解压状态。该路由返回的组件上的 prop/object。在用户导航到 '/home/userDetails' 时使用 guard 来自其他地方，如 state可能未定义。
如果通过了路由 Prop : props.location && props.location.state && props.location.state.infoId或者 props.location?.state?.infoId如果使用函数组件，那么您也可以使用 useLocation react 钩子(Hook):

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

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

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

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

使用 react-router-dom v5

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

然后在组件中从 match 获取 id路线 Prop :

  props.match.params.infoId

对于功能组件，useParams react 钩子(Hook):

  const { infoId } = useParams();

使用 react-router-dom v6

  <Route path="/home/userDetails/:infoId" element={<Detail />} />

只有useParams在 v6 中 Hook ，没有路由 Prop 。

  const { infoId } = useParams();

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

location

match

useLocation v5

useLocation v6

useParams v5

useParams v6