Защищенный маршрут в React, не передавая параметры

Question

Я пытаюсь создать защищенный маршрут, как показано в коде ниже:

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

    }
export default PrivateRoute;

Я передаю следующие параметры в конфигурации маршрутизатора:

<PrivateRoute component={Appointments} authenticated={this.state.authenticated} exact path="/appointments" render={(props) => <Appointments {...props} appointments={this.state.appointments} />} />

.

Однако, когда я пытаюсь выполнить маршрутизацию, создается впечатление, что реквизит "назначений = {this.state.appointments}" не передается компоненту "Назначения".

Это ошибка, которую я получаю

TypeError: Невозможно прочитать свойство 'map' из неопределенного

Есть идеи, что это за проблема?

Answer 1

Я думаю, что проблема в том, что вы передаете реквизиты в свойстве рендеринга PrivateRoute, которое равно render={(props) => <Appointments {...props} appointments={this.state.appointments} />}.Теперь это свойство не используется в вашем фактическом рендеринге компонента в PrivateRoute.Попробуйте выполнить следующие действия при инициализации маршрута:

<PrivateRoute component={Appointments} authenticated={this.state.authenticated} exact path="/appointments"  appointments={this.state.appointments} />

Это должно решить вашу проблему.Я бы предложил здесь вместо того, чтобы создавать собственный PrivateRoute, вы можете использовать React HOC для создания оболочки аутентификации на реальном компоненте.