#javascript #reactjs #react-router-dom
Вопрос:
На моем сайте, MainWidget.js содержать всех категорий ссылке как — одежду ,электронику,аксессуары для дома и т. д….Теперь, если я нажимаю на одежде ,это будет оказывать на Product.js страница, на которой вся одежда в разделе говоря ,я застрял на этой странице ,Если выбрать определенный товар, то это следует оказывать на потом ProductScreen.js где подробности этого конкретного продукта упоминается…Итак, как я передаю идентификатор выбранного продукта из Product.js компонент для компонента экрана продукта
App.js
import React from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import Header from './components/Header'; import Main_WidgetPage from './components/Main_WidgetPage'; import Product from './components/Product'; import ProductScreen from './components/ProductScreen'; import data from './data'; function App() { return ( lt;Routergt; lt;div className="grid-container"gt; lt;Switchgt; lt;Route path="/productScreen/:id"gt; lt;Header /gt; lt;ProductScreen/gt; lt;/Routegt; lt;Route path="/product"gt; lt;Header /gt; lt;Product /gt; lt;/Routegt; lt;Route path="/"gt; lt;Header /gt; lt;Main_WidgetPage /gt; lt;/Routegt; lt;/Switchgt; lt;/divgt; lt;/Routergt; ); } export default App; MainWidget.js
lt;div className="card_container1"gt; lt;div className="card"gt; lt;Link to="/product"gt; lt;h1gt; Link to PRODUCT.JS Clothing Section lt;/h1gt; lt;/Linkgt; lt;/divgt; lt;div className="card"gt; lt;Link to="/product"gt; lt;h1gt; Link to PRODUCT.JS lt;/h1gt; lt;/Linkgt; lt;/divgt; lt;div className="card"gt; lt;Link to="/product"gt; lt;h1gt; Link to PRODUCT.JS lt;/h1gt; lt;/Linkgt; lt;/divgt; lt;/divgt; Product.js
function Product() { return ( lt;div className="product"gt; lt;div className="row center"gt; {/* fetching data from data.js using map func */} {/* data - file name; products -array name */} lt;Link to="/productScreen?id='**I want to pass the id of the selcted product** '"gt; { data.products.map(product=gt;( lt;div key={product._id} className="card card-deck"gt; lt;div className="product_image"gt; lt;a href={`/product/${product._id}`}gt; lt;img className="image" src={product.image} alt={product.name} style={{textAlign:"center"}}/gt; lt;/agt; lt;/divgt; lt;div className="product_detail"gt; lt;a href={`/product/${product._id}`}gt; lt;h4gt;{product.brand}lt;/h4gt; lt;pgt;{product.description}lt;/pgt; lt;/agt; lt;div className="product_rating_Page"gt; lt;Rating rating={product.rating} numReviews={product.numReviews}/gt; ProductScreen.js
function ProductScreen({props}) { const product = data.products.find(x =gt; x._id === props.match.params.id); console.log(product); if(!product){ return lt;divgt;Product Not Foundlt;/divgt; } // const product=data.products; return ( lt;div className="productScreen"gt; lt;div className="row"gt; lt;div className="col-2"gt; lt;img className="large" src={product.image} alt={product.name}/gt; lt;/divgt; lt;div className="col-1"gt; lt;ulgt; lt;ligt; lt;h1gt;{product.brand}lt;/h1gt; lt;/ligt; lt;ligt; lt;Rating rating={product.rating} numReviews={product.numReviews}/gt; lt;/ligt; lt;ligt; lt;CurrencyFormat renderText={(value) =gt; ( lt;h5gt;{value}lt;/h5gt; )} decimalScale={2} value={product.price} displayType={"text"} thousandSeparator={true} prefix={"$"} /gt; lt;/ligt; lt;ligt; lt;pgt;{product.description}lt;/pgt; lt;/ligt; lt;/ulgt; lt;/divgt; Ответ №1:
в вашей маршрутизации вы можете routeParams использовать URL-адрес, как показано ниже.
lt;Route path="/product/:id" component={ProductPage} exact={true} /gt; поместите свой lt;Linkgt; внутри data.products.map(product=gt;() , как показано ниже, и передайте идентификатор продукта по ссылке.
lt;Link to=`/productScreen/${product_id}`gt; в вашем ProductScreen.js файле вы можете получить доступ к идентификатору продукта с помощью приведенного ниже кода
// make sure you import the useParam import { useParams } from "react-router"; // use this to access the id from the route params const params = useParamslt;RouteParamgt;(); console.log(params.id);