提供的道具类型无效

Question

I have a React route defined in my app as:

<PrivateRoute path="/home" component={Home} />

The component loads the user from the store then depending on the type does a redirect. It is defined as:

import React, { useEffect, memo } from 'react'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { createStructuredSelector } from 'reselect'
import { Redirect } from 'react-router-dom'
import { useInjectSaga } from '../../utils/injectSaga'
import {
  makeSelectCurrentUser,
  makeSelectLoading,
  makeSelectError
} from '../../containers/App/selectors'
import { loadUser } from '../../containers/App/actions'
import saga from '../../components/Header/saga'

const key = 'home'

function Home({ user, loading, error, loadUser }) {
  useInjectSaga({ key, saga })

  const username = localStorage.getItem('username')
  useEffect(() => {
    loadUser(username)
  }, [])

  return !loading && user && !error ? (
    <Redirect to={user.type === 'admin' ? '/admin' : '/promoter'} />
  ) : (
    <div>Loading...</div>
  )
}

const mapStateToProps = createStructuredSelector({
  user: makeSelectCurrentUser(),
  loading: makeSelectLoading(),
  error: makeSelectError()
})

const mapDispatchToProps = dispatch => {
  return {
    loadUser: username => dispatch(loadUser(username))
  }
}

const withConnect = connect(mapStateToProps, mapDispatchToProps)

export default compose(withConnect, memo)(Home)

When I execute the code, it works. However, I get a warning in the console:

index.js:1437 Warning: Failed prop type: Invalid prop `component` supplied to `PrivateRoute`.

It points to the line with my "home" route.

What am I doing wrong? How should this be done?

Answer 1

I found the solution. Once I did the below, the problem went away.

<PrivateRoute path="/home" component={() => <Home/>} />

Still weird, yet the latter is obviously valid no matter what. Seems like a bug in react-router, maybe.