我要解决的是,每当用户单击动态URL时如何呈现到特定页面?更具体地说,有我的“ product_list” api数据。在“ product_list”
api数据中,有一个键“ url”,每当用户单击此“ url”时,用户将被重定向到另一个特定的“
product_detail”页面。如何将特定的动态网址页面实现到特定页面?因此,每当用户单击该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数据,例如“ 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
解决此问题的另一种方法是<Link
/>
在的map
功能中添加一个组件,contacts
并将细节传递给props
。另外,您必须设置Router
组件以呈现页面。假设<App
/>
作为根组件,你必须与包裹该组件BrowserRouter
的内部index.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请求来呈现数据。