У меня был вопрос о передаче идентификатора в мой маршрут деталей при нажатии - PullRequest
Новая
       14

У меня был вопрос о передаче идентификатора в мой маршрут деталей при нажатии

0 голосов
/ 23 июня 2019

Так что, как только я нажму на страницу с информацией, я бы хотел передать идентификатор продукта в URL, когда вы щелкнете по нему.Поэтому, когда я нажимаю на страницу с подробностями, мне бы хотелось, чтобы она была myurl / details / itemid, и я нашел этот ответ StackOverflow, но не могу заставить его работать. Реагирует параметр передачи маршрутизатора на компонент .Я хотел бы, чтобы, когда моя страница с данными перезагружалась, она перезагружалась с правильным идентификатором элементов. 

this is my details page 
import React, { Component } from "react";
import { ProductConsumer } from "../context";
import { Link } from "react-router-dom";
import { ButtonContainer } from "./Button";
import DropDown from "./Dropdown";
import ItemCategory from "./ItemCategory";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { AwesomeButton } from "react-awesome-button";

export default class Details extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false
    };
  }

  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }
  render() {
    return (

          return (
            <div className="container-fluid width-100 bg-white py-5 mt-5 ">
              {/* ProductInfo */}
              <div className="row">
                <div className="col mx-auto col-md-6 my-3 ">
                  <Carousel autoPlay>
                    <div>
                      <img src={img} className="img-fluid" alt="product" />
                    </div>
                    <div>
                      <img src={img2} className="img-fluid" alt="product" />
                    </div>
                    <div>
                      <img src={img3} className="img-fluid" alt="product" />
                    </div>
                    <div>
                      <img src={img4} className="img-fluid" alt="product" />
                    </div>
                  </Carousel>

                  {/* Add a Second Image */}
                </div>
                {/* Product Text */}
                <div className="col mx-auto col-md-6 my-3 text-capitalize">
                  <h1 className="display-3">{title}</h1>

                  <h4 className="text-black">
                    <strong className="text-black">
                      price : <span>$</span>
                      {price}
                    </strong>
                  </h4>
                  <h4 className="text-blue">

                  </h4>

                  <p className="text-black ">{info}</p>
                  <p className="text-black ">{fabric}</p>

                  <small className="text-danger">{luxury}</small>
                  {/* buttons */}
                  <div>
                    <Link to="/all">
                      <AwesomeButton
                        className="text-capitalize mx-10"
                        ripple
                        size="large"
                        type="primary"
                      >
                        Back To Products
                      </AwesomeButton>
                    </Link>

                    <div className="mt-2">
                      <AwesomeButton
                        className="text-capitalize m-auto"
                        ripple
                        size="medium"
                        type="primary"
                        cart
                        disabled={inCart ? true : false}
                        onPress={() => {
                          value.addToCart(id);
                        }}
                      >
                        {inCart ? "inCart" : "add to cart"}
                      </AwesomeButton>
                    </div>
                    <ItemCategory title={category} />
                    <div className="mt-2">
                      <img
                        src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/logo-center/9_bdg_secured_by_pp_2line.png"
                        border="0"
                        alt="Secured by PayPal"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        }}
      </ProductConsumer>
    );
  }
}

1 Ответ

1 голос
/ 23 июня 2019 
 <Route path="/details/:id" component={Details} />

и в компоненте Details у вас есть доступ 

export default class Details extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}
...