Передача параметров с помощью router 9 и использование их в URL - PullRequest
Новая
       8

Передача параметров с помощью router 9 и использование их в URL

0 голосов
/ 14 января 2019

У меня проблемы с передачей параметров, но мой образ мышления, вероятно, неверен, поэтому:

Мой App.js с маршрутами 

class App extends Component {
  render() {
    return (
    <Router>
      <div className="container">
      (...)
      <Route path="/product/:id" component={ProductPage} ></Route>
      (...)
      </div>
    </Router>
    );
  }
}

и мой раздел отзывов с массивом комментариев 

    class ReviewSection extends Component {

      constructor(props) {
      super(props);
      this.state = {rates:[]};
    }


    componentDidMount() {

        axios.get('http://oceneo-api.herokuapp.com/api/products/1/rates')
           .then(res => {
             console.log(res)
             const rates = res.data;
             this.setState({rates})
           })
           .catch(error => console.log(error))
         }
 render(){
        return(

            <div className="container products">
                {this.state.rates.map(rate => 

                <div className="row" key={rate.id}>
              (...)

Основная проблема для меня состоит в том, чтобы изменить ссылку api на что-то вроде localhost:3001/product/2, что даст желаемый /api/products/2/rates вместо /api/products/1/rates.

1 Ответ

0 голосов
/ 14 января 2019

Компонент Route передает параметры визуализированному компоненту, поэтому при проверке реквизита компонента ProductPage вы увидите match prop, и он содержит ключ с именем params. Вот пример https://codesandbox.io/s/1y773j6kk4

...