时间戳

首页 > 解决方案 > 每当用户单击动态 url ReactJS 时如何呈现到页面？

javascript - 每当用户单击动态 url ReactJS 时如何呈现到页面？

问题描述

我要解决的是，每当用户点击动态网址时如何呈现到特定页面？更具体地说，有我的“product_list”api 数据。在“product_list” api 数据中有一个关键的“url”，每当用户点击这个“url”时，用户将被重定向到另一个特定的“product_detail”页面。如何将特定的动态 url 页面实现到特定页面？因此，每当用户单击该 url 时，用户将看到一个特定的 UI 页面，而不是那个动态 url 页面。

我可能是 reactjs 的新手。我正在尝试解决这个问题，但我不知道我在哪里做错了。如果有人能帮助我解决我想要解决的问题，那就太好了。非常感谢你。

// product_list api-data -->

[
    {
        "url": "http://localhost:8000/api/p/product01",
        "id": 19,
        "title": "product01",
        "slug": "product01",
        "description": "product01descc",
        "image": "http://localhost:8000/media/google.com/images/tet0.png",
        "price": 1,
        "status": true,
        "created_on": "2020-04-19T03:45:12Z"
    },
    {
        "url": "http://localhost:8000/api/p/product02",
        "id": 20,
        "title": "product02",
        "slug": "product02",
        "description": "product01descc",
        "image": "http://localhost:8000/media/google.com/images/tet0.png",
        "price": 2,
        "status": true,
        "created_on": "2020-04-19T03:45:12Z"
    }
]


特定产品列表的产品详细api-data，例如“product-01”。

{
    "id": 19,
    "title": "product01",
    "slug": "product01",
    "description": "product01descc",
    "image": "http://localhost:8000/media/google.com/images/tet0.png",
    "price": 1,
    "created_on": "2020-04-19T03:45:12Z",
    "status": true,
    "color": 1,
    "size": 1,
    "product_category": []
}


我努力试图解决这个问题。

./src/productList.js


import React, {Component} from "react";
import Contacts from './productListHook.js';


export default class App  extends Component{

    state = {
        contacts: [

        ]
    }

    contactList() {
        fetch('http://localhost:8000/api/p_list')
        .then(res => res.json())
        .then((data) => {
          this.setState({ contacts: data })
        })
        .catch(console.log)
      }

    render(){
    return(

        <Contacts contacts={this.state.contacts} />
    )
 }
}


在此页面中，每当我尝试呈现用户时，当用户单击“标题”时，如下所示。但是该页面将用户呈现到 api-detail 页面。显然这将是因为我没有将该 api-detail 页面实现到用户将看到 UI 详细信息页面的特定页面。如何在 reactjs 中实现它？

./src/productListHook.js


import React from 'react'

    const Contacts = ({ contacts }) => {
      return (
            {contacts.map((contact) => (
            <img src={contact.image} alt="" class="img-fluid" />
            <h3> <a href={contact.url}>{contact.title}</a> </h3>

            ))}
      )
    };

export default Contacts

标签： javascriptreactjs

解决方案

解决此问题的另一种方法是在函数中添加一个<Link />组件并将详细信息传递为. 此外，您必须设置组件以呈现页面。假设作为您的根组件，您必须将此组件包装在您的文件中。这是一个工作沙箱。mapcontactspropsRouter<App />BrowserRouterindex.js

//Contacts.js
import React from "react";
import { Link } from "react-router-dom";

const Contacts = ({ contacts }) => {
  return (
    <div>
      {contacts.map((contact) => (
        <div key={contact.id>>
          <img src={contact.image} alt="" className="img-fluid" />
          <h3>
            {" "}
            <Link
              to={{
                pathname: `/productdetails/${contact.id}`,
                contact: contact,
              }}
            >
              {contact.title}
            </Link>
          </h3>
        </div>
      ))}
    </div>
  );
};

export default Contacts;

//App.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import ProductDetails from "./ProductDetails";

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/productdetails/:slug" component={ProductDetails} />
      </Switch>
    </div>
  );
}

export default App;

中的Home组件App.js将是App.js您的问题。

//ProductDetails.js
import React from "react";
import {  useLocation } from "react-router-dom";

function ProductDetails({ location }) {
  const { contact } = location;
  console.log(contact);
  let queryParams= useLocation();
  console.log(queryParams)
  return (
    <div>
      <h1>Product Details Page</h1>;
    </div>
  );
}

export default ProductDetails;

在ProductDetails组件中，您可以访问queryParams和从Contacts组件传递的道具，您可以使用这些道具发出额外的 API 请求来呈现数据。

推荐阅读