title: Looping over data to create "dynamic routes" in React
body: <p>I have a question to react-router-dom. Is it possible to do something like that?</p>
  <p>I use React-Bootstrap so there some wrappers/wrapper components that could be the problem.</p>
  <p>I try to create a dynamic route loop:</p>
  <pre><code>import React from &quot;react&quot;
  import {products} from &quot;../data/Products&quot;
  import {Route} from &quot;react-router-dom&quot;
  import {DetailedProduct} from &quot;../components/DetailedProduct&quot;
  
  export const ProductRoutesGenerator = () =&gt; {
      return (
          products.map((product =&gt; {
              return (
                  &lt;Route exact path={product.productName} component={DetailedProduct(product)}/&gt;
              )
          })
      ))
  }
  </code></pre>
  <p>and the Component should be created like that:</p>
  <pre><code>import {Container} from &quot;react-bootstrap&quot;
  
  export const DetailedProduct = (props) =&gt; {
      return (
          &lt;Container&gt;
              &lt;h1&gt;{props.productName}&lt;/h1&gt;
              &lt;h3&gt;{props.productDescription}&lt;/h3&gt;
              &lt;h5&gt;{props.productPrice}&lt;/h5&gt;
          &lt;/Container&gt;
      )
  }
  </code></pre>
  <p>Thanks for any help in advance :-)</p>
  <p>Edit:
  The index.js file look like this:</p>
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import './index.css'
  import App from './App'
  import reportWebVitals from './reportWebVitals'
  import {BrowserRouter} from &quot;react-router-dom&quot;
  
  ReactDOM.render(
        &lt;React.StrictMode&gt;
                &lt;BrowserRouter&gt;
                      &lt;App/&gt;
                &lt;/BrowserRouter&gt;
        &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  )
  
  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint.
  </code></pre>
  <p>I just wrapped the BrowserRouter over the App. Beside that all code should be default from the create react command.</p>
  <p>products is a JavaScript object for testing it looks like this:</p>
  <pre><code>export const products = [
    {
      &quot;id&quot;: &quot;0&quot;,
      &quot;productName&quot;: &quot;testProduct0&quot;,
      &quot;productDescription&quot;: &quot;testDescription&quot;,
      &quot;productPrice&quot;: 10
    }
  ,
    {
      &quot;id&quot;: &quot;1&quot;,
      &quot;productName&quot;: &quot;testProduct1&quot;,
      &quot;productDescription&quot;: &quot;testDescription&quot;,
      &quot;productPrice&quot;: 20
    }
  ...
  </code></pre>
  <pre><code>ReactDOM.render(
        &lt;React.StrictMode&gt;
            &lt;div&gt;
                &lt;h1&gt;
                    {products[1].productName}
                &lt;/h1&gt;
            &lt;/div&gt;
                &lt;BrowserRouter&gt;
                      &lt;App/&gt;
                &lt;/BrowserRouter&gt;
        &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  )
  </code></pre>
  <p>renders me my product name so yes i get the value before BrowserRouter is called.</p>