title: React JS: Fetching data from REST server with dynamic parameters
body: <p>I've built a small React component that fetches json data from REST service with ajax call.</p>
  
  <p>In <a href="http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server" rel="nofollow">tutorial</a> you can change to component data prop to url where you can fetch the data from:</p>
  
  <pre><code>ReactDOM.render(
    &lt;CommentBox url="/api/comments" /&gt;,
    document.getElementById('content')
  );
  </code></pre>
  
  <p>Now, the problem is that the REST API requires parameters in following way:</p>
  
  <pre><code>/api/resource/parametervalue
  </code></pre>
  
  <p>Meaning that the data which is fetched from the server changes according to the parameter.</p>
  
  <p>The parameter that needs to be passed to the REST API is in the PATH of the current URL in following way:</p>
  
  <pre><code>/mywebsite/dynamicparameter
  </code></pre>
  
  <p>One way to do it would be getting url parameters with javascript:</p>
  
  <pre><code>var pathArray = window.location.pathname.split( '/' );
  var lastParameter = pathArray.pop();
  var url = "/api/resource/"+lastParameter;
  </code></pre>
  
  <p>And passing that url variable to the component:</p>
  
  <pre><code>ReactDOM.render(
    &lt;CommentBox url={url} /&gt;,
    document.getElementById('content')
  );
  </code></pre>
  
  <p>I've investigated <a href="https://github.com/rackt/react-router/blob/latest/docs/Introduction.md" rel="nofollow">React Router</a> but I'm not sure if it really helps in this problem.</p>
  
  <p>What would be best and most elegant way to represent and define React component data url with parameters? Is there React solution to this?</p>