title: Dynamically Define ReactJS Routes from JSON
body: <p>I have a global JSON configuration that has a variety of configuration data, including route names and the components that I'd like to be rendered for the route. I'd like to dynamically build my routes from this JSON configuration. I'm currently able to dynamically generate the route, however, since the route components are Strings in the JSON file, React doesn't like them and throws the error below. Any suggestions for accomplishing this goal?</p>
  
  <pre><code>warning.js:44 Warning: Unknown props `history`, `location`, `params`, `route`, `routeParams`, `routes` on &lt;Dashboard&gt; tag. Remove these props from the element. For details, see https://f b.me/react-unknown-prop
      in Dashboard
      in RouterContext
      in Router
  </code></pre>
  
  <p>Relevant JSON snippet:</p>
  
  <pre><code>{
      "routes" : [
          {
              "route_name"              : "home",
              "path"                   : "/",
              "visible_in_menu"         : true,
              "menu_title"              : "Home",
              "menu_font_awesome_icon"  : "fa fa-home",
              "component"              : "App",
              "child_routes"            : null
          },
          {
              "route_name"              : "analytics",
              "path"                   : "/analytics",
              "visible_in_menu"         : true,
              "menu_title"              : "Analytics",
              "menu_font_awesome_icon"  : "fa fa-bar-chart",
              "component"              : "Dashboard",
              "template"                : null,
              "child_routes" : [
                  {
                      "route_name"      : "analytics_daily" ,
                      "path"           : "/daily",
                      "visible_in_menu" : true,
                      "menu_title"      : "Daily",
                      "component"      : "Dashboard"
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>Code to fetch config and dynamically build the routes:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Router, Route, Link, browserHistory } from 'react-router'
  import $ from 'jquery';
  
  import App from './App'; 
  import Dashboard from './Dashboard';
  import SidebarMenu from './SidebarMenu';
  
  import './index.css';
  
  $.get("/routes_menu_config.json", bootstrapApplication);
  
  function bootstrapApplication(config){
  
      var dynamicRoutesJSX = buildDynamicRoutes(config);
  
      // Add dynamic routes to app
      ReactDOM.render((
        &lt;Router history={browserHistory}&gt;
          {dynamicRoutesJSX}
        &lt;/Router&gt;
      ), document.getElementById('root'));
  
      // Render sidebar menu
      ReactDOM.render(
          &lt;SidebarMenu /&gt;,
          document.getElementById('menu')
      ); 
  
  }
  
  function buildDynamicRoutes(config){
  
      var routeJSX = [];
  
      for (let [index, route] of config.routes.entries()) {
        routeJSX.push(&lt;Route path={route.path} components={route.component} key={index}/&gt;);       
      }
  
      return routeJSX;
  }
  </code></pre>
  
  <p>I also tried the plain object instantiation of routes instead of using JSX, but it produces the same error:</p>
  
  <pre><code>$.get("/routes_menu_config.json", bootstrapApplication);
  
  function bootstrapApplication(config){
  
      var dynamicRoutesJSX = buildDynamicRoutes(config);
  
      // Add dynamic routes to app
      ReactDOM.render(&lt;Router history={browserHistory} routes={dynamicRoutesJSX} 
  
      // Render sidebar menu
      ReactDOM.render(
          &lt;SidebarMenu /&gt;,
          document.getElementById('menu')
      ); 
  
  }
  
  
  function buildDynamicRoutes(config){
  
      var routes = [];
  
      // Iterate parent routes from config
      for (var i=0; i&lt;config.routes.length; i++) {
  
          var configParentRouteDefinition = config.routes[i];
  
          // Create parent route definition
          var parentRouteDefinition = {
              path : configParentRouteDefinition.path,
              component: configParentRouteDefinition.component
          };
  
          // If there are child routes, add them to the definition
          if(configParentRouteDefinition.child_routes){
  
              // Track child routes
              var childRoutes = [];
  
              // Iterate child routes, generate definition
              for(var j=0; j&lt;configParentRouteDefinition.child_routes.length; j++){
  
                  var configChildRouteDefinition = configParentRouteDefinition.child_routes[j]
  
  
                  var childRouteDefinition = {
                      path : configChildRouteDefinition.path,
                      component: configChildRouteDefinition.component         
                  };
  
                  childRoutes.push(childRouteDefinition);
              }
  
              // Ad the definition to the parent route definition
              parentRouteDefinition["childRoutes"] = childRoutes;
  
          }
  
          routes.push(parentRouteDefinition);
  
      }
  
      return routes;
  
  }
  </code></pre>