Как получить идентификатор элемента, чтобы показать все данные от выбранного элемента с помощью activ-router? - PullRequest
Новая
       5

Как получить идентификатор элемента, чтобы показать все данные от выбранного элемента с помощью activ-router?

0 голосов
/ 16 апреля 2020

Итак, у меня есть компонент, в котором показаны все продукты. Что я хочу сейчас, так это когда я нажимаю на один из продуктов, чтобы открыть компонент для отображения всех данных о выбранном продукте. Когда я нажимаю, он показывает мне это url http://localhost:3000/products/1. Как я могу получить данные с этим идентификатором в конце url

Это компонент, который извлекает все данные из mysql: 

import React from "react";
import {Link} from "react-router-dom"


class Home extends React.Component{
    constructor(){
        super()
        this.state = {
            products: [],
            isLoaded: false
        }
    }

   componentDidMount(){
        fetch("/home")
        .then(res => res.json())
            .then(result =>{
                        return(
                            this.setState({
                                products: result,
                                isLoaded: true
                            })
                        )
            })
   }

    render(){
      if(!this.state.isLoaded){
          return(
              <h1>Loading...</h1>
          )
      }

      return (
            <div className="row text-center">
                    {this.state.products.map(elements => 
                            <div className="col-lg-6">
                                    <h1>
                                        <Link to={`products/${elements.id}`}>{elements.name}</Link> 
                                    </h1>
                            </div> 
                    )}  
            </div>
         )
    }
}
export default Home;

И как я могу получить, что щелкнул информация о продукте здесь: 

import React from "react";

class ProductDesc extends React.Component{
    constructor(){
        super()
    }

    componentDidMount(){
        fetch()
            .then(res => res.json())
                .then(result =>{
                    console.log(result)
                })
    }

    render(){
        return(

        )
    }
}
export default ProductDesc;

1 Ответ

1 голос
/ 16 апреля 2020

В вашем Router вы должны иметь Route, который отображает ProductDesc. 

<Route path="products/:id" component={ProductDesc} />

Это добавит маршрутных реквизитов к отображаемому компоненту. Вы можете получить доступ к параметру маршрута из match проп.

ProductDes c

this.props.match.params.id
...