Javascript 反应路由器访问对象详细信息

我试图在新页面上显示可单击对象的详细信息。我试过几个例子，但效果有限。 唯一“有点”起作用的是Alexander Luna建议在组件中通过ID访问。然而，虽然这会返回id号，但我无法访问任何其他值，如“title”。 我尝试过globalStore，但是，错误消息告诉我它没有定义。我不确定那是不是我最好的选择。 最终，当我计划使用上下文时，我希望返回整个对象，请参见下面的“D”

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

应用程序）我已注释掉我以前的尝试

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Navbar />
        <Switch>
          <Route exact path="/" component={ProductList} />
          <Route path="/cart" component={Cart} />

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

          {/* <Route exact path="/details/:id" render={(props) => <Details globalStore={globalStore} 
           {...props} /> } /> */}


          {/* <Route exact path="/details/:id" render={(props)=>{ <Details id={props.match.params.id}/>}} 
           /> */}

          <Route component={Default} />

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

类应用程序扩展组件{
render（）{
返回(
{/*   } /> */}
{/* { }} 
/> */}

我想在其中呈现的详细信息页面

import React, { Component } from "react";
export default class Details extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
        <h2>{this.props.match.params.title}</h2>
      </div>

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

从“React”导入React，{Component}；
导出默认类详细信息扩展组件{
render（）{
返回(
{this.props.match.params.id}
{this.props.match.params.title}

在产品页面中，我使用此链接点击查看详细信息

xport default class Product extends Component {
    render() {
        const { id, title, img, price, inCart } = this.props.product;
        return (
            <ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
                <div className="card">
                    <div className="img-container" onClick={() => console.log('you clicked container')}
                    >
                         <Link to={`/details/${ this.props.product.id }`} >
                            <img src={img} alt="product" className="card-img-top" />
                        </Link>

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

导出默认类产品扩展组件{
render（）{
const{id，title，img，price，incontat}=this.props.product；
返回(
log（“您单击了容器”）}
>

这就是原始代码的外观，我想使用{title}标记，但我不知道是否需要“value=>”等

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

{value=>{
常数{
身份证件
公司，
img，
信息，
价格，
标题
大小，
}=价值.产品；
返回(
{/*标题*/}
{title}

尝试读取构造函数中的参数，如下所示：

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

构造函数（道具）
{
超级（道具）
const{match:{params}}=this.props；
var id=params.id
此.state={
id:id，
}
}

尝试读取构造函数中的参数，如下所示：

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

构造函数（道具）
{
超级（道具）
const{match:{params}}=this.props；
var id=params.id
此.state={
id:id，
}
}

您需要一个额外的参数

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

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


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

// In Product component

<Link to={`/details/${ this.props.product.id }/${this.props.product.title}`} >
  <img src={img} alt="product" className="card-img-top" />
</Link>

导出默认类详细信息扩展组件{
render（）{
返回(
{this.props.match.params.id}
{this.props.match.params.title}
);
} 
}
//产品内组件

您需要一个额外的参数

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

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


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

// In Product component

<Link to={`/details/${ this.props.product.id }/${this.props.product.title}`} >
  <img src={img} alt="product" className="card-img-top" />
</Link>

导出默认类详细信息扩展组件{
render（）{
返回(
{this.props.match.params.id}
{this.props.match.params.title}
);
} 
}
//产品内组件

您拥有的唯一路由参数是

id

（：id），因此没有

params.title

。传递的

title

在哪里？您只需要id和title或整个对象？我正试图通过API访问title，我已经在产品页面中完成了此操作。导出默认类产品扩展组件{render（）{const{id，title，img，price，incontat}=this.props.product；return（Zohaib--我需要整个对象，id和title只是为了测试，它们是“最远的”，其他尝试只是破坏了服务器。您可以将对象传递到

链接
查看您拥有的唯一路由参数是
id
（：id）所以没有
params.title
。传递
title
的位置在哪里？您只需要id和title或整个对象？我正在尝试通过API访问title，我已经在产品页面中完成了这项工作。导出默认类产品扩展组件{render（）{const{id，title，img，price，incontact}=this.props.product；return（Zohaib--我需要整个对象，id和title只是为了测试，它们是“最远的”，其他尝试刚刚破坏了服务器。您可以将对象传递到
链接
查看Hi Fernando，谢谢您的建议，您能再解释一下您的意思吗？谢谢您想发送整个对象吗“产品”到另一页，对吗？如果需要帮助，请告诉我。是的，这样我就可以访问它的值。没错，你通过url发送整个产品对象，然后在另一页中阅读。这不是很推荐，但它是功能性的Hi Fernando，谢谢你的建议，你能再解释一下你的意思吗？谢谢你想发送将整个对象“product”发送到另一个页面，对吗？如果需要帮助，请告诉我。是的，这样我就可以访问它的值。没错，您可以通过url发送整个product对象，然后在另一个页面中读取它。这不推荐，但它是功能性的