Блог

Главная - Вопросы по программированию - Как предоставить информацию для одностраничного продукта

Как предоставить информацию для одностраничного продукта

#javascript #reactjs #react-router

Вопрос:

У меня есть маршрутизатор

 function App() {
  return (
      <BrowserRouter>
        <NavBar />
        <Route exact path='/' render={(props) => <Main />}/>
        <Route exact path='/products/:productId' render={(props) => <Product />}/>
      </BrowserRouter>
  );
}

и на главной странице

 function Main() {
    const [products, setProducts] = useState([])

    useEffect(() => {
        Axios.get("http://localhost:3001/products/get").then((p) => {
            setProducts(p.data)
        })
      }, []);

    return (
        <div>
            <h2>Productos</h2>
            <div className="store">
            {products.reverse().map((p) => {
                let ref = `/products/${p.idProducts}`
                return <a href={ref}>
                    <div className="product">
                        <b>{p.name}</b><br/><i>${p.value}</i>
                    </div></a> })}
            </div>
        </div>
    )
}

И я хочу получить на своей странице продукта информацию о том, какой продукт был выбран (мне просто нужны p.idПродукты продукта, выбранного на главной странице).

Комментарии:

1. В чем именно заключается проблема? Вы хотите знать, как ссылаться productId на URL-адрес?

2. Когда я нажимаю на <a>, я хочу указать <a><Продукт /> p.idПродукты продукта, на который я нажал. Таким образом, я могу отобразить страницу продукта с идентификатором продукта.

3. Пожалуйста, отредактируйте вопрос, чтобы ограничить его конкретной проблемой с достаточной детализацией для определения адекватного ответа.

Ответ №1:

Похоже, вы ищете это:

 const { productId } = useParams();
Метки: