title: Dynamic paths in react router
body: <p>I am trying to migrate my website from traditional web app approach to react based app. In this process I am stuck with a problem related to urls. In my website, on server side I use <strong>Url Rewrite</strong> feature to map urls to their correct controller. But I am not able to figure out how to handle this thing in react router. My current, react router code looks like this</p>
  
  <pre><code>&lt;BrowserRouter&gt;
      &lt;Route exact path="/" component={Home}/&gt;
      &lt;Route path="/black-forest" component={Product}/&gt;
      &lt;Route path="/cakes" component={ProductList}/&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>This code I have written for building a prototype. But ideally there are many different urls which can point to <code>ProductList</code> component. Similarly there are many urls which can point to <code>Product</code> component.</p>
  
  <p>For e.g,
  Following urls points to <code>ProductList</code> component
  <code>
   - http://www.example.com/best-cakes-in-australia
   - http://www.example.com/cake-delivery-in-india
   - http://www.example.com/flowers-delivery-in-canada
  </code></p>
  
  <p>At a gross level I have around 10,000 such urls which are created using server side <code>UrlRewrite</code> hence they follow no specific pattern. These url are mostly going to point towards either <code>ProductList</code> or <code>Product</code> component.</p>
  
  <p>How can I create path for all these urls in my react router config? Any pointers would be greatly appreciated. </p>