React PrivateRoute, объявленный с помощью render prop, отображает частный компонент перед выполнением перенаправления

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 отображается перед выполнением перенаправления, когда PrivateRoute объявлен со свойством render=, и как я могу предотвратить это?

Answer 1

Похоже, что даже если вы переопределили опору рендеринга, она все еще выполняется, когда вы передаете ее в Route с помощью {...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} />
      }
    }} />