title: How dynamically create ReactJs Router for Links and render a page for each Links?
body: <p>I have an array of objects(<code>titleUrl</code>) contains titles and urls that is coming from an API. I used a custom component called <code>MenuLink</code> to create links on the sidebar and the links are populated using <code>Object.keys(titleUrl).map</code> method from the <code>titleUrl</code> array. </p>
  
  <p>What I'm trying to achieve here is, When I click on each menu items it should redirect to a page created using <code>pagerender</code> component which is given as <code>to={{ pathname: "/pagerender"}</code> in the example</p>
  
  <pre><code>import React from 'react';
  import { Link } from "react-router-dom";
  import { MenuLink } from "../components/MenuLink";
  
  class CreateLinks extends React.Component{
      render(){
          var titleUrl= [
              {"title1":"url1"},
              {"title2":"url2"},
              {"title3":"url3"},
              ...
              ...
          ];
          return(
              &lt;React.Fragment&gt;
                  { 
                      Object.keys(titleUrl).map((item, i) =&gt; (
                          &lt;MenuLink key={item} element={Link} to={{ pathname: "/pagerender"} &gt;{ titleUrl[item].title }&lt;/MenuLink&gt;
                      ))
                  }   
              &lt;/React.Fragment&gt;
          )
      }
  }
  
  export default CreateLinks;
  </code></pre>
  
  <p><strong>Partial Solution so far</strong></p>
  
  <p>I was able to create the links dynamically.</p>
  
  <p><strong>Need to achieve</strong></p>
  
  <p>Dynamically created routes for these links and when we click on these links, url of the same title (from the array of object) should pass as an argument to the <code>pagerender</code> and using this argument <code>pagerender</code> renders the page</p>