title: How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras
body: <p>I am currently working on a CMS based project.</p>
  
  <p>For which i am using the universal react redux boilerplate by erikras</p>
  
  <p>I really need suggestions on handling dynamic routing</p>
  
  <p>Lets take a simple scenario form the boilerplate...</p>
  
  <p>In <strong>routes.js</strong></p>
  
  <pre><code>&lt;Route path="about" component={About}/&gt;
  &lt;Route path="login" component={Login}/&gt;
  &lt;Route path="survey" component={Survey}/&gt;
  &lt;Route path="widgets" component={Widgets}/&gt;
  </code></pre>
  
  <p><strong>data.js</strong></p>
  
  <pre><code>export const data = [
    {id: 1, property: 'Dashboard', link: '/'},
    {id: 2, property: 'Login', link: '/login'},
    {id: 3, property: 'About Us', link: '/About'},
  ];
  </code></pre>
  
  <p>now, let say on the basis of user role, the properties in json data will change</p>
  
  <p><em>let say new property: is</em></p>
  
  <pre><code>{id: 4, property: 'test page', link: '/test'}
  </code></pre>
  
  <p>When react will render the components, how it would know the route link .. as it is not defined in the routes.js</p>
  
  <p>I am not getting the right way to implement it</p>
  
  <p>We need a sidebar made of specific menu content as per the user role .</p>
  
  <p>Let say we are building a reservation system , there can be different user roles like admin, maintenance mode, assistant role
  .</p>
  
  <p>So different role will have different properties, accordingly we need to generate the menu on the basis it, as the properties will definitely differ as per user role.</p>
  
  <p>Thanks!!</p>