时间戳

首页 > 解决方案 > 无法将正确的组件作为道具传递给自定义路由器

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

问题描述

我正在尝试创建一个<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：如果我添加Project而Route不是ProtectedRoute，它工作正常。

编辑：添加主页/项目组件（它们都具有相同的形式）。

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

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

标签： javascriptreactjstypescriptreact-router

解决方案

您需要发送组件

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

}

推荐阅读