title: how to create new react routes in a component according to the props?
body: <p>I am trying to create a new react routes according to the props of components.
  App.js routes the landing page to the Home component.</p>
  <pre class="lang-js prettyprint-override"><code>import &quot;./App.css&quot;;
  import Navbar from &quot;./components/Navbar&quot;;
  import Home from &quot;./components/Home&quot;;
  import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  
  function App() {
      return (
          &lt;div&gt;
              &lt;Navbar /&gt;
              &lt;Router&gt;
                  &lt;Routes&gt;
                      &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
                  &lt;/Routes&gt;
              &lt;/Router&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>I have service card file where I want to create new routes according to props.
  Like for example</p>
  <pre><code>route = lorem -&gt; /services/lorem
  route = ipsum -&gt; /services/ipsum
  </code></pre>
  <p>Servicecard looks like this</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import &quot;../css/servicecard.css&quot;;
  import { BrowserRouter, Routes, Route } from &quot;react-router-dom&quot;;
  import Home from &quot;./Home&quot;;
  
  const ServiceCard = ({ text, subClass, image, route }) =&gt; {
      return (
          &lt;&gt;
              &lt;div className={`card-container ${subClass}`} data-aos=&quot;fade-up&quot;&gt;
                  &lt;span className=&quot;card-title&quot;&gt;{text}&lt;/span&gt;
  
                  &lt;img src={image} alt=&quot;service-icon&quot; /&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  };
  
  export default ServiceCard;
  </code></pre>