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

我正在尝试创建一个

组件，我可以在其中传递一个如下所示的组件

<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} />

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

任何人都可以帮助解决这个错误，或者如何使用道具传递部件。 PS：如果我在

Route

中添加

Project

，而不是

ProtectedRoute

，它可以正常工作

编辑：添加主/项目组件（两者具有相同的表单）

导出类项目扩展React.Component{
构造器（道具：任何）{
超级（道具）；
}
render（）{
返回(
项目
)
}
}

您需要发送组件

<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} />

（）}authUser={this.state.authUser}/>
（）}authUser={this.state.authUser}/>

还有受保护的路线

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 }} />
        );
}

接口受保护的路由Props{
路径：字符串；
组件：React.ElementType；
authUser:any；
}
导出类ProtectedRoute扩展React.Component{
构造器（道具：任何）{
超级（道具）；
}
render（）{
const authUser=this.props.authUser；
console.log（this.props.component）；
返回authUser(
this.props.component（）
) : (
);
}

---

}

如果按照您编写的方法执行操作，则会出现以下错误->

此表达式不可调用。并非“ElementType”类型的所有成分都可以调用。类型“symbol”没有调用签名。TS2349

。我按照您的建议更改了

App.tsx

，并保留了返回到

，这也不起作用。您是否可以创建一个最小的代码框来解决此问题，如果没有环境，很难进行调试，否则您可以参考我在react中提到的render prop或HOC

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

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

<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} />

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 }} />
        );
}