反应路由 - 当我使用 history.push 传递 URL 时，URL 中的 id 参数未定义

Question

我设法在 onClick 中使用 history.push，因为我想将用户 ID 传递给配置文件页面组件，但 URL 中的 uuid 参数未定义，我不知道为什么。我真的被困在这部分了。

我还想传递从随机用户生成器 API 获得的所有其他道具，就像我在 CardList 中所做的那样，以便能够构建个人资料页面。

非常感谢任何人的帮助。

import React, { Fragment } from "react";
import { withRouter } from "react-router-dom";

const Card = ({ history, firstName, lastName, email, uuid, image, city, country }) => {
  return (
    <Fragment>
      <div className="tc bg-washed-green dib br3 pa3 ma2 dim bw2 shadow-5 pointer">
        <img src={image} alt="userImage" onClick={() => history.push(`/profilepage/${uuid}`)} />
        <h2>{`${firstName} ${lastName}`}</h2>
        <p> {email} </p>
        <div>
          <span>{`${city}, ${country}`}</span>
        </div>
      </div>
    </Fragment>
  );
};

export default withRouter(Card);

import React, { Fragment } from "react";

const ProfilePage = ({ uuid }) => {
  return (
    <Fragment>
      <h1 className="f1">Profile Page: {uuid}</h1>
    </Fragment>
  );
};

export default ProfilePage;

这是 App.js 中的路由

render() {
    const { users, isPending } = this.props;
    if (isPending) {
      return <h1 className="tc"> Loading... </h1>;
    } else {
      return (
        <div className="tc">
          <Switch>
            <Route exact path="/homepage" render={() => <CardList users={users} />} />
            <Route path="/profilepage/:uuid" component={ProfilePage} />
          </Switch>
        </div>
      );
    }
  }
}

import React, { Fragment } from "react";
import Card from "./Card";

const CardList = ({ users }) => {
  return (
    <Fragment>
      <h1 className="f1"> IOTA Users </h1>
      {users.map((user) => {
        return (
          <Card
            key={user.login.uuid}
            image={user.picture.large}
            firstName={user.name.first}
            lastName={user.name.last}
            email={user.email}
            city={user.location.city}
            country={user.location.country}
          />
        );
      })}
    </Fragment>
  );
};

export default CardList;

Answer 1

在您的ProfilePage 组件中，您可以通过以下方式获取uuid

• Approach-1：在这种方法中，您需要传播所有其他从父级发送的props，或者需要使用...rest 参数来捕获您不想传播的所有其他道具.

import React, { Fragment } from "react";

const ProfilePage = ({ match }) => {
  return (
    <Fragment>
      <h1 className="f1">Profile Page: {match.params.uuid}</h1>
    </Fragment>
  );
};

export default ProfilePage;

• 方法2：这样你也可以访问其他props

import React, { Fragment } from "react";

const ProfilePage = (props) => {
  return (
    <Fragment>
      <h1 className="f1">Profile Page: {props.match.params.uuid}</h1>
    </Fragment>
  );
};

export default ProfilePage;

Answer 2

编辑：看起来你没有发送 uuid 作为道具。可以查看 CardList 组件吗？

未定义是因为它实际上并未将 uuid 数据作为道具发送。你应该从this.props.match.params.uuid获取它

你能检查一下你的 url 中是否存在你的 id 吗？如果是这样，我的方法应该有效。

从 react-router-dom 版本 5 开始，您可以使用它们的钩子，例如 useParams。所以，你可以让你的代码库更清晰