我要解决的是,每当用户单击动态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文件。这是一个工作中的沙箱。
<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您的问题。
Home
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请求来呈现数据。
ProductDetails
queryParams
Contacts