IT技术 - react js中的动态路由，无法在路由中分配字符串中的组件名称 - 吾爱随笔录

我目前正在尝试学习reactjs，我遇到了router-react-dom，我试图创建一个动态路由器，并找到了这个解决方案How to Implement dynamic routing in routes.js for generated menu items in the sidebar in Universal react erikras解决方案选项 2 的 redux 样板，但我无法使其最终工作。

这是我的 Main.js

import React, { Component } from 'react';
import { Switch, Route, Link, Redirect, withRouter} from 'react-router-dom'
import Home from './Home'
import Inbox from './Inbox'
import Trash from './Trash'
import Order from './Order'
import Protected from './Protected'
import Login from './Login'
import Forums from './Forums'
import NoMatch from './NoMatch'
import Promos from './Promos'

import SiteRoutes from './Nav'

const Main = () => (
  <main>
    <Switch> 
      {SiteRoutes.public.map(route => 
          <Route
            key={route.index}
            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        )}

    </Switch>
  </main>
)
export default Main;

这是我的 Nav.js

import React, { Component } from 'react';

const Data  = {
  public :[
        {
          path: "/",
          exact: true,
          main: 'Home'
        },
        {
          path: "/inbox",
          main: 'Inbox'
        },
        {
          path: "/trash",
          main: 'Trash'
        },
        {
          path: "/order/:value",
          main: 'Order'
        },
        {
          path: "/login",
          main: 'Login'
        },
        {
          path: "/forums",
          main: 'Forums'
        },
        {
          path: "/promos",
          main: 'Promos'
        }
      ]
};

export default Data;

我正在尝试从 Nav.js 映射和创建动态路由库，但我的问题在于在上创建 Route 的部分component={route.main}，它从 Nav.js 分配route.main字符串值似乎不适用于我的情况。我按照我上面提到的链接上的内容进行操作。

当我单击链接时， index.js:2178 Warning: <Home /> is using uppercase HTML. Always use lowercase HTML tags in React.我猜是控制台错误，因为它是一个字符串并且不会调用该组件，但是在我上面提到的链接上似乎可以正常工作。我想知道我的代码中是否缺少某些内容？

提前致谢。