javascript - React js中的动态路由，无法在路由中分配字符串中的组件名称

Question

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

这是我的 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 映射和创建动态路线基础，但我的问题在于在 component={route.main} 上创建路线的部分, 它分配 route.main来自 Nav.js 的字符串值在我的情况下似乎不起作用。我按照上面提到的链接上的内容进行操作。

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

提前致谢。

Answer 1

一个字符串，当传递给 React.createElement 时，会创建一个 DOM 元素，而不是自定义组件，通常只有小写字母，因此会出现警告。相反，我建议只将组件类存储在 Nav.js 本身中:

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'

const Data = {
  public: [
    {
      path: "/",
      exact: true,
      main: Home
    },
    …
  ]
}

因此，当 React Router 在内部创建组件时，它将从组件类而不是字符串创建元素。