Реагировать на маршрутизацию - параметры идентификатора в URL-адресе не определены, когда я передаю его с помощью history.push - PullRequest
Новая
       109

Реагировать на маршрутизацию - параметры идентификатора в URL-адресе не определены, когда я передаю его с помощью history.push

0 голосов
/ 08 мая 2020

Мне удалось использовать history.pu sh в onClick, поскольку я хочу передать идентификатор пользователя компоненту страницы профиля, но параметры uuid в URL-адресе не определены, и я не знаю почему. Я действительно застрял в этой части.

Я также хочу передать все другие реквизиты, которые я получаю от 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;

и это Маршрутизация в приложении. 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;

Ответы [ 2 ]

1 голос
/ 09 мая 2020

В вашем компоненте ProfilePage вы можете получить uuid, как показано ниже

  • Подход-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;
0 голосов
/ 08 мая 2020

РЕДАКТИРОВАТЬ : похоже, вы не отправляете uuid в качестве реквизита. Можете ли вы проверить компонент CardList?

Здесь undefined, потому что он фактически не отправляет данные uuid в качестве реквизита. Вы должны получить его из this.props.match.params.uuid

Можете ли вы также проверить, существует ли ваш идентификатор в URL-адресе? Если да, то мой метод должен работать.

А из react-router-dom версии 5 вы можете использовать их ловушку, например useParams. Итак, вы можете сделать свою кодовую базу более понятной

...