无法将正确的组件作为道具传递给自定义路由器

Question

我正在尝试创建一个<ProtectedRoute /> 组件，我可以在其中传递一个如下所示的组件

<Route exact={true} path={routes.LOGIN} component={Login} />
<ProtectedRoute path={routes.HOME} component={Home} authUser={this.state.authUser} />
<ProtectedRoute path={routes.PROJECT} component={Project} authUser={this.state.authUser} />

我的 ProtectedRoute.tsx 代码

interface ProtectedRouteProps {
    path: string;
    component: React.ElementType;
    authUser: any;
}

export class ProtectedRoute extends React.Component<ProtectedRouteProps, {}> {

    constructor(props: any) {
        super(props);
    }

    render() {
        const Component = this.props.component;
        const authUser = this.props.authUser;
        console.log(this.props.component);

        return authUser ? (
            <Component />
        ) : (
                <Redirect to={{ pathname: routes.LOGIN }} />
            );
    }
}

在道具中我也试过React.Component、React.ComponentType<any>。

但是，我的应用从不路由到 Project，它总是路由到 Home。

所以，我添加了一个日志以查看我得到的this.props.component。

我总是得到

class Home extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.c…

这让我觉得我没有正确传递组件。

任何人都可以帮助解决错误或如何使用道具传递组件。 PS：如果我在Route 中添加Project 而不是ProtectedRoute，它可以正常工作。

编辑：添加 Home/Project 组件（两者具有相同的形式）。

export class Project extends React.Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Project</h1>
            </div>
        )
    }
}

Answer 1

你需要发送组件

<Route exact={true} path={routes.LOGIN} component={Login} />
<ProtectedRoute path={routes.HOME} component={()=>(<Home/>)} authUser={this.state.authUser} />
<ProtectedRoute path={routes.PROJECT} component={()=>(<Project/>)} authUser={this.state.authUser} />

和 ProtectedRoute

interface ProtectedRouteProps {
path: string;
component: React.ElementType;
authUser: any;
}

export class ProtectedRoute extends React.Component<ProtectedRouteProps, {}> {

constructor(props: any) {
    super(props);
}

render() {
    const authUser = this.props.authUser;
    console.log(this.props.component);

    return authUser ? (
        this.props.component()
    ) : (
            <Redirect to={{ pathname: routes.LOGIN }} />
        );
}

}