Как визуализировать <Route /> из response-route-dom, используя объект, а не компонент / функцию

Question

У меня есть список объектов, которые имеют path, name и React component в качестве атрибутов. Когда я перебираю список объектов, получая каждый объект и отображая компонент <Route key={indice} path={route.path} name={route.name} component={route.component}/>, я получаю предупреждение:

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)

Я уже пытался вложить route.component таким образом, чтобы он действовал как <Component />, но этот подход был немного сложным, когда он взаимодействует с другими компонентами. Очевидно, я пытался вложить компонент в функцию стрелки () => (route.component), но я все еще получал предупреждение.

Подход, который я попробовал («сложный»):

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

Я ожидаю визуализации <Route />, который получает компонент [{component: Dashboard}], без предупреждений.

Answer 1

Вы должны использовать компонент, как показано ниже:

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

Answer 2

Попробуйте,

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>