Javascript 如何呈现<；路线/>；使用对象而不是组件/函数从react路由dom

我有一个对象列表，其中有一个

路径

、一个

名称

和一个React

组件

作为属性。当我迭代对象列表，获取每个对象并呈现

组件时，我收到一条警告：

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
          in Route (at DefaultLayout.js:158)
          in DefaultLayout (created by Context.Consumer)
          in Connect(DefaultLayout) (created by Route)
          in Route (at DefaultLayout.test.js:22)
          in PersistGate (at DefaultLayout.test.js:21)
          in Provider (at DefaultLayout.test.js:20)
          in Router (created by BrowserRouter)
          in BrowserRouter (at DefaultLayout.test.js:19)

我已经尝试过以一种类似于

的方式嵌套

路由.component，但是这种方法在与其他组件通信时有点复杂。显然，我试图将组件嵌套在箭头函数
（）=>（route.component）
中，但仍然收到警告

我尝试过的方法（复杂的方法）：

const PrivateRoute=（{component:component，…rest}）=>(
{
把这个还给我
? 
: 
}}
/>
)

我希望呈现一个
，该组件接收组件
[{component:Dashboard}]
，并且没有任何警告。
您应该按如下方式使用该组件：

<Route
      key={index}
      path={route.path}
      exact={route.exact}
      name={route.name}
      render={props => (
           <route.component {...props} />
      )}
/>

(
)}
/>
试试这个

function isLoggin() {
    return this.loggedIn ? true : false;
}

function PrivateRoute ({component: Component, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => isLoggin()
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

<BrowserRouter>
   <Switch>
      <PrivateRoute path='/dashboard' component={Dashboard} />
   </Switch>
</BrowserRouter>

函数isLoggin（）{
返回此参数。loggedIn？真：假；
}
函数privaterout（{component:component，…rest}）{
返回(
伊斯洛金（）
? 
: }
/>
)
}
在阵列对象上映射时，阵列对象的外观如何。我想知道的是route.Component是如何存储在您的数据中的
[{name:path:Component:}，{name:path:Component:}，{name:path:Component:}]
，这是在一个单独的文件中，然后我将对象导入到我想要使用它的文件中。流程是：routes.js导入组件并生成一个对象列表，一个随机组件导入routes.js中的列表并迭代该列表。这基本上就是我正在做的，但是你已经在一个函数中转换了登录。。。
function isLoggin() {
    return this.loggedIn ? true : false;
}

function PrivateRoute ({component: Component, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => isLoggin()
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

<BrowserRouter>
   <Switch>
      <PrivateRoute path='/dashboard' component={Dashboard} />
   </Switch>
</BrowserRouter>