如何将组件的名称从另一个组件的对象传递给中的路由？

Question

我正在学习React，在学习几个教程的同时，我喜欢回去学习如何使它成为D.R.Y，因此，考虑到下面的app.js

app.js

import React from 'react'
import './App.css'

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

// Components
import Navbar from './components/Navbar'
import { Home, Reports, Products, Team, Messages, Support } from './pages'

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/reports" exact component={Reports} />
        <Route path="/products" exact component={Products} />
        <Route path="/team" exact component={Team} />
        <Route path="/messages" exact component={Messages} />
        <Route path="/support" exact component={Support} />
      </Switch>
    </Router>
  )
}

export default App

我注意到路由也被复制到我声明侧边栏的title中

SidebarData.js：

import React from 'react'

import * as FaIcons from 'react-icons/fa'
import * as AiIcons from 'react-icons/ai'
import * as IoIcons from 'react-icons/io'

const SidebarData = [
  { title: 'Home', path: '/', icon: <AiIcons.AiFillHome />, cName: 'nav-text' },
  { title: 'Reports', path: '/reports', icon: <IoIcons.IoIosPaper />, cName: 'nav-text' },
  { title: 'Products', path: '/products', icon: <FaIcons.FaCartPlus />, cName: 'nav-text' },
  { title: 'Team', path: '/team', icon: <IoIcons.IoMdPeople />, cName: 'nav-text' },
  { title: 'Messages', path: '/messages', icon: <FaIcons.FaEnvelopeOpenText />, cName: 'nav-text' },
  { title: 'Support', path: '/support', icon: <IoIcons.IoMdHelpCircle />, cName: 'nav-text' },
]

export default SidebarData

考虑到代码是复制的，我一直试图用以下方法映射路由组件声明中的组件SidebarData：

尝试1:

import React from 'react'
import './App.css'

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

// Components
import Navbar from './components/Navbar'
import SidebarData from './components/SidebarData'
import { Home, Reports, Products, Team, Messages, Support } from './pages'

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        {SidebarData.map(({ path, title }, i) => (
          <Route key={i} path={path} exact component={title} />
        ))}
      </Switch>
    </Router>
  )
}

export default App

但是我得到了一个错误，并注意到当调用组件时，它不能工作，并且在VSC中，我的组件引入了：

import { Home, Reports, Products, Team, Messages, Support } from './pages'

都变灰了。

尝试2:

我想，也许我可以通过在SidebarData中引入组件来构建一个引用：

SidebarData.js：

import React from 'react'

import * as FaIcons from 'react-icons/fa'
import * as AiIcons from 'react-icons/ai'
import * as IoIcons from 'react-icons/io'

import { Home, Reports, Products, Team, Messages, Support } from '../pages'

const SidebarData = [
  { title: 'Home', comp: <Home />, path: '/', icon: <AiIcons.AiFillHome />, cName: 'nav-text' },
  {
    title: 'Reports',
    comp: <Reports />,
    path: '/reports',
    icon: <IoIcons.IoIosPaper />,
    cName: 'nav-text',
  },
  {
    title: 'Products',
    comp: <Products />,
    path: '/products',
    icon: <FaIcons.FaCartPlus />,
    cName: 'nav-text',
  },
  { title: 'Team', comp: <Team />, path: '/team', icon: <IoIcons.IoMdPeople />, cName: 'nav-text' },
  {
    title: 'Messages',
    comp: <Messages />,
    path: '/messages',
    icon: <FaIcons.FaEnvelopeOpenText />,
    cName: 'nav-text',
  },
  {
    title: 'Support',
    comp: <Support />,
    path: '/support',
    icon: <IoIcons.IoMdHelpCircle />,
    cName: 'nav-text',
  },
]

export default SidebarData

然后在app.js中更改映射

{SidebarData.map(({ path, comp }, i) => (
          <Route key={i} path={path} exact component={comp} />
        ))}

但是，这也不适用于以下错误：

错误:元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但是: object。

检查Router.Consumer的呈现方法。

我试着去研究这个问题，但是我认为我的失败是因为我不知道这在反应中会被称为什么。阅读以下内容没有效果：

• How to pass component reference to routes component in react
• How to pass container components into react-router-dom Route?
• React react-router-dom pass props to component

当我通过SidebarData映射时，如何将引用的标题从组件SidebarData转换为路由中的组件引用？

Answer 1

好问题，试试这个：

const SidebarData = [
  // ...   
  {
    title: 'Reports',
    comp: Reports,
    path: '/reports',
    icon: <IoIcons.IoIosPaper />,
    cName: 'nav-text',
  },
  {
    title: 'Products',
    comp: Products,
    path: '/products',
    icon: <FaIcons.FaCartPlus />,
    cName: 'nav-text',
  },
  ...

在映射的地方，使用如下的comp属性：

{
  SidebarData.map(({ path, comp }, i) => (
    <Route key={i} path={path} exact component={comp} />
  ));
}

而且，由于comp属性包含对组件的引用，所以我认为最好像Comp那样大写它。