从JSON动态定义ReactJS路由

Question

我有一个全局JSON配置，其中包含各种配置数据，包括路由名称和我想为该路由呈现的组件。我想根据此JSON配置动态构建路由。我目前能够动态生成路由，但是，由于路由组件是JSON文件中的字符串，因此React不喜欢它们，并在下面抛出错误。对实现这个目标有什么建议吗？

warning.js:44 Warning: Unknown props `history`, `location`, `params`, `route`, `routeParams`, `routes` on <Dashboard> tag. Remove these props from the element. For details, see https://f b.me/react-unknown-prop
    in Dashboard
    in RouterContext
    in Router

相关JSON代码段：

{
    "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"
                }
            ]
        }
    ]
}

获取配置并动态构建路由的代码：

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((
      <Router history={browserHistory}>
        {dynamicRoutesJSX}
      </Router>
    ), document.getElementById('root'));

    // Render sidebar menu
    ReactDOM.render(
        <SidebarMenu />,
        document.getElementById('menu')
    ); 

}

function buildDynamicRoutes(config){

    var routeJSX = [];

    for (let [index, route] of config.routes.entries()) {
      routeJSX.push(<Route path={route.path} components={route.component} key={index}/>);       
    }

    return routeJSX;
}

我还尝试了路由的普通对象实例化，而不是使用JSX，但是它会产生相同的错误：

$.get("/routes_menu_config.json", bootstrapApplication);

function bootstrapApplication(config){

    var dynamicRoutesJSX = buildDynamicRoutes(config);

    // Add dynamic routes to app
    ReactDOM.render(<Router history={browserHistory} routes={dynamicRoutesJSX} 

    // Render sidebar menu
    ReactDOM.render(
        <SidebarMenu />,
        document.getElementById('menu')
    ); 

}


function buildDynamicRoutes(config){

    var routes = [];

    // Iterate parent routes from config
    for (var i=0; i<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<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;

}

Answer 1

您需要创建一个组件注册表，以便您可以从它们的名称中查找组件引用：

import App from './App'; 
import Dashboard from './Dashboard';

const componentRegistry = {
    "App": App,
    "Dashboard": Dashboard
}

<Route path={route.path} components={componentRegistry[route.component]} key={index}/>;