javascript - 在 protected 路线 reactjs 中传递 Prop

Question

我在我的 reactjs 应用程序中使用 protected 路由，我想知道如何在 protected 路由中传递 Prop ，或者是否有更优雅的方法来解决我的问题。

我觉得需要在 protected 路由中传递 Prop 的原因是注销按钮位于 protected 组件内，我需要与包含所有路由的父组件通信，用户正在尝试退出。

相关代码如下:

父组件:

render() {
    const PrivateRoute = ({ component: Component, ...rest }) => (
        <Route {...rest} render={(props) => (
            isAuthenticated === true
            ? <Component {...props} /*I tried inserting handleLogout={this.handleLogout} here */ />
            : <Redirect to="/Login"/>
        )} />
    )

return (
<HashRouter basename={BASE_URL}>
    <div className="stories-module">
    <PrivateRoute
        exact
        path={'/login'}
        component={Login}
      />
    <PrivateRoute
        exact
        path={'/Main/'}
        component={Main}
    />
</HashRouter>
)};

不幸的是，我不知道我还能如何解决这个问题。

在路由组件中传递 Prop 是否被认为是不好的做法？如果是这样，我还能如何处理这个问题？如果不是，我该如何正确传递 prop？

Answer 1

在类外声明你的PrivateRoute:

const PrivateRoute = ({ component: Component, handleLogout, isAuthenticated, ...rest }) => (
        <Route {...rest} render={(props) => (
            isAuthenticated === true
            ? <Component {...props} handleLogout={handleLogout} />
            : <Redirect to="/Login"/>
        )} />
);

然后将 handleLogout 传递给您的 PrivateRoute Prop :

render() {
    return (
        <HashRouter basename={BASE_URL}>
            <div className="stories-module">
                <Route
                     exact
                     path={'/login'}
                     component={Login}
                />
                <PrivateRoute
                     exact
                     path={'/Main/'}
                     component={Main}
                     handleLogout={this.handleLogout}
                     isAuthenticated={isAuthenticated}
                />
            </div>
        </HashRouter>
    )
};

你可能想像下面这样声明你的PrivateRoute，以便通过传播所有 Prop 将任何 Prop 传递给组件:

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
        <Route {...rest} render={(props) => (
            isAuthenticated === true
            ? <Component {...props} {...rest} />
            : <Redirect to="/Login"/>
        )} />
);