React Route v4 和 PrivateRoute 给出错误 - React.createElement: type is invalid答案

【问题标题】：React Route v4 and PrivateRoute gives error - React.createElement: type is invalidReact Route v4 和 PrivateRoute 给出错误 - React.createElement: type is invalid
【发布时间】：2019-04-02 08:29:15
【问题描述】：

为什么会出现这个错误？

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记导出您的来自定义它的文件中的组件，或者您可能混淆了默认和命名导入。

我的 PrivateRoute.js 看起来像这样：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      (Auth.isUserAuthenticated()) ? (
        <Component {...props} {...rest} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

我的导入调用是这样的：

import HomePage from "../homepage/homepage";
import PrivateRoute from "../../modules/privateRoute";

我是这样使用它的：

<PrivateRoute exact path='/' component={HomePage} />

【问题讨论】：

检查<Component {...props} {...rest} />这个组件是否是一个有效的组件。当这个PrivateRoute 挂载时
console.log(组件);给出未定义的。如何最好地解决这个问题？
你能分享这个PivateRoute的代码吗？
您是否在PrivateRoute 文件中导入了Component？
假设 PrivateRoute 只有'/' 路径，您导入/导出主页的方式肯定有问题。如果还有其他使用PrivateRoute 的路线，请将它们添加到您的问题中。

标签： reactjs react-router-v4

【解决方案1】：

似乎您尚未从其各自的文件中导出 HomePage 组件。请确保您已使用 export 关键字导出组件。

class HomePage extends React.Component {
    // your class implementation goes here
}
export default HomePage;

或者，您可能没有导入 HomePage 组件，您应该在传递给 PrivateRoute 之前将其导入。

import HomePage from '../../path/to/HomePage';
<PrivateRoute exact path='/' component={HomePage} />

【讨论】：