reactjs - 使用 render prop 声明的 React PrivateRoute 在执行重定向之前显示私有组件

Question

我正在使用此问题中提到的 PrivateRoute 的实现。我的实现的相关部分如下：

const { component: Component, ...rest } = this.props;
return <Route {...rest}
render={(props) => {
  if (authenticated) {
    if (this.props.render) {
      return this.props.render(props)
    }
    else {
      return <Component {...props} />
    }
  } else {
    return <Redirect to={redirectUrl} />
  }
}} />

我发现当我用 声明 PrivateRoute 时render=，如下所示：

<PrivateRoute path="/users" name="Users" render={props => <Users {...props} />} />

然后浏览器暂时显示该Users组件，然后才执行重定向到登录 url。

但是，当我用 声明 PrivateRoute 时component=，如下所示：

<PrivateRoute path="/users" name="Users" component={Users} />

然后浏览器立即执行重定向而不显示私有组件，这是我在使用render=.

为什么在使用属性声明Users时在执行重定向之前显示组件，我该如何防止这种情况发生？PrivateRouterender=

Answer 1

看起来即使您已经覆盖了 render 道具，当​​您使用{...rest}. 从道具中解构它会给你想要的结果

const { component: Component, render, ...rest } = this.props;

return <Route {...rest}
    render={(props) => {
      if (authenticated) {
        if (render) {
          return render(props)
        }
        else {
          return <Component {...props} />
        }
      } else {
        return <Redirect to={redirectUrl} />
      }
    }} />