在返回的组件实例上找不到 `render` 方法：您可能忘记定义 `render`答案

【问题标题】：No `render` method found on the returned component instance: you may have forgotten to define `render`在返回的组件实例上找不到 `render` 方法：您可能忘记定义 `render`
【发布时间】：2021-05-20 05:18:48
【问题描述】：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";

interface PrivateRoute {
  isLoggedIn: boolean;
  path: string;
  component: any;
  exact: boolean;
}

const PrivateRoute: React.FC<PrivateRoute> = ({
  isLoggedIn,
  component,
  ...rest
}) => {
  return (
    <Route
      {...rest}
      component={(props: any) =>
        isLoggedIn ? <Component {...props} /> : <Redirect to="/" />
      }
    />
  );
};
const mapStateToProps = (state: any) => ({
  isLoggedIn: !!state.auth.uid,
});

export default connect(mapStateToProps)(PrivateRoute);

这就是我拥有的用于创建私有路由的组件。而路由器就是这个；

import HeaderTop from "./HeaderTop/HeaderTop";
import HeaderBottom from "./HeaderBottom/HeaderBottom";
import Body from "./Body/Body";
import Footer from "./Footer/Footer";
import Movies from "./ShowPages/Movies";
import Series from "./ShowPages/Series";
import NotFoundPage from "./NotFoundPage/NotFoundPage";
import { Router, Switch, Route } from "react-router-dom";
import LoginPage from "./LoginPage/LoginPage";
import { createBrowserHistory } from "history";
import PrivateRoute from "./PrivateRoute";
export const history = createBrowserHistory();

const HomePage: React.FC = () => {
  return (
    <Router history={history}>
      <div>
        <HeaderTop />
        <HeaderBottom />
        <Switch>
          <Route path="/" component={LoginPage} exact={true} />
          <PrivateRoute path="/meerkast" component={Body} exact={true} />
          <PrivateRoute path="/movies" component={Movies} exact={true} />
          <PrivateRoute path="/series" component={Series} exact={true} />
          <Route component={NotFoundPage} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
};

export default HomePage;

那么这里发生了什么？我没有类组件，为什么我会在任何地方使用渲染方法？我发现这个问题在 stackoverflow 上被问了很多次，但没有人给出正确的答案。

【问题讨论】：

我必须尝试一下，看看为什么会出错，但我建议在 PrivateRoute 中使用 useSelector 而不是使用 connect。这样能解决吗？

标签： javascript reactjs redux react-router-dom

【解决方案1】：

您的问题是 component 道具上的大小写不一致。你的PrivateRoute 得到一个带有小写c 的道具component。当你用大写的C 调用<Component {...props} /> 时，Component 变量不存在。

我理解您在 JSX 中使用大写的原因，即 React 将小写名称解释为内置元素。我也理解你在PrivateRoute props 中使用小写的原因，就是想和react-router-dom 的Route props 保持一致。

但我们必须让两者共存。为此，我们将展开表达式中的小写 component 重命名为 Component。

const PrivateRoute: React.FC<PrivateRoute> = ({
  isLoggedIn,
  component: Component,
  ...rest
}) => {

【讨论】：