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

Question

我目前正在尝试学习 reactjs，我遇到了 router-react-dom，我试图创建一个动态路由器，并找到了这个解决方案解决方案选项 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 的字符串值在我的情况下似乎不起作用。我按照我上面提到的 link 上的内容进行了操作。

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

提前致谢。

Answer 1

一个字符串，当传递给 React.createElement 时，会创建一个 DOM 元素 ，而不是自定义组件，通常只有小写字母，因此出现警告.相反，我建议只将组件 classes 存储在 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 在内部创建组件时，它将从组件 class 而不是字符串创建元素。

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

dynamic routing in react js, component name from a string cannot be assigned in route

javascript

reactjs