title: Passing parameters with react router v4 and using them in url's
body: <p>I'm having problems with passing my parameters, but my way of thinking is probably wrong so:</p>
  
  <p>My App.js with routes</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
      &lt;Router&gt;
        &lt;div className="container"&gt;
        (...)
        &lt;Route path="/product/:id" component={ProductPage} &gt;&lt;/Route&gt;
        (...)
        &lt;/div&gt;
      &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p>and my review section with array of comments</p>
  
  <pre><code>    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 =&gt; {
               console.log(res)
               const rates = res.data;
               this.setState({rates})
             })
             .catch(error =&gt; console.log(error))
           }
   render(){
          return(
  
              &lt;div className="container products"&gt;
                  {this.state.rates.map(rate =&gt; 
  
                  &lt;div className="row" key={rate.id}&gt;
                (...)
  </code></pre>
  
  <p>The main problem for me is to change the api link with something like <code>localhost:3001/product/2</code> which would give desired <code>/api/products/2/rates</code> instead of <code>/api/products/1/rates</code>.</p>