Итак, у меня есть компонент, в котором показаны все продукты. Сейчас я хочу, чтобы при нажатии на один из продуктов открывался компонент для отображения всех данных о продукте, по которому щелкнули. Когда я нажимаю, он показывает мне это 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;
0
Mirzad 16 Апр 2020 в 01:21

1 ответ

Лучший ответ

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

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

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

ProductDesc

this.props.match.params.id
1
Drew Reese 15 Апр 2020 в 22:28