在受保护的路由reactjs中传递道具答案

【问题标题】：Passing props in protected route reactjs在受保护的路由reactjs中传递道具
【发布时间】：2018-08-09 07:17:39
【问题描述】：

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

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

以下是相关代码：

父组件：

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

很遗憾，我不知道还有什么办法可以解决这个问题。

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

【问题讨论】：

你正在尝试的应该可以工作，但你可以将你的 PrivateRoute 声明移到类范围之外。

标签： javascript reactjs react-router

【解决方案1】：

这是一个更通用的解决方案，可以根据需要向组件传递尽可能多的道具：

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

  return (
    <HashRouter basename={BASE_URL}>
      <PrivateRoute
        exact
        path={'/login'}
        component={Login}
        data={{
            handleLogout=this.handleLogout,
            ...
            someProp=this.prop
        }}
      />
      <PrivateRoute
        exact
        path={'/Main/'}
        component={Main}
        data={{
            handleLogout=this.handleLogout,
            ...
            someProp=this.prop
        }}
      />
    </HashRouter>
  );
}

【讨论】：

在我将handleLogout=this.handleLogout 更改为handleLogout:this.handleLogout 之前，上述方法对我来说都失败了

【解决方案2】：

在课堂外声明您的PrivateRoute：

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

然后将handleLogout 传递给您的PrivateRoute 道具：

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，以便通过传播所有道具将任何道具传递给组件：

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

【讨论】：

@A.S.J 不客气，只有一个问题，您的登录路径是私有的吗？
不，登录应该是公开的。为什么要问？
因为它在代码中被声明为 PrivateRoute，所以你不应该在注销时访问它。
哦，是的，这不是我的实际代码，这是一个愚蠢的错误。在我的应用中它是公开的，不知道我在想什么

【解决方案3】：

为您的PrivateRoute HOC 添加一个额外的道具

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

  return (
    <HashRouter basename={BASE_URL}>
      <PrivateRoute
        exact
        path={'/login'}
        component={Login}
        handleLogout={this.handleLogout}
      />
      <PrivateRoute
        exact
        path={'/Main/'}
        component={Main}
        handleLogout={this.handleLogout}
      />
    </HashRouter>
  );
}

【讨论】：