reactjs - 我有一个关于在单击时将 id 传递到我的详细信息路线的问题

Question

因此，一旦我单击详细信息页面，我想在您单击它时将产品的 id 传递给 url。因此，当我单击详细信息页面时，我希望它是 myurl/details/itemid 我找到了这个 StackOverflow 答案，但我似乎无法让它工作。React Router 将参数传递给 Component。我希望当我的详细信息页面重新加载时，它会重新加载正确的项目 ID。

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

标签： reactjsreact-propsreact-dom

Answer 1

 <Route path="/details/:id" component={Details} />

并且在Details您有权访问的组件中

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