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：如果我在Project中添加Route而不是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 }} />
        );
}

}

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

1 个答案: