Условная маршрутизация в React

Question

Я хочу иметь возможность загружать компонент только при аутентификации пользователя. Обычно у меня есть этот PrivateRoute компонент для этого:

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

Который я называю так:

   <PrivateRoute
      hasAccess={hasAccess}
      path="/settings"
      component={Setting}
    />

Но в другом случае я не могу повторно использовать этот код. Поэтому я решил просто объявить маршрут следующим образом:

<Route
  createMeeting={createMeeting}
  path="/meetings"
  component={MeetingRoutes}
  render={props =>
    createMeeting === true ? <Component {...props} createMeeting={createMeeting} /> : <Redirect to="/" />
  } />

Он должен действовать так же, как PrivateRoute, если вы спросите меня, но это не так. Вместо этого я получил это сообщение об ошибке:

Предупреждение: вы не должны использовать <Route component> и <Route render> на одном и том же маршруте;<Route render> будет игнорироваться

Может кто-нибудь объяснить мне, почему он дает мне эту ошибку? Я не могу найти решение своей проблемы.

Answer 1

Лучше написать многократно PrivateRoute:

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

Так что с Settings вы можете использовать этот маршрут следующим образом:

<PrivateRoute
    hasAccess={hasAccess}
    path="/settings"
    component={Setting}
    componentProps={{
        addUser: addUser
    }}
/>

и с MeetingRoutesкак это:

<PrivateRoute
    hasAccess={hasAccessToMeetingRoutes}
    path="/meetings"
    component={MeetingRoutes}
    componentProps={{
        createMeeting: createMeeting
    }}
/>

Answer 2

Вы можете использовать HOC для переноса компонента маршрута. Требуется проверка подлинности. Другие компоненты не требуют проверки подлинности. Вы можете выполнить их обычную визуализацию.

Пример проверки подлинности HOC:

const loginGuard = Component =>
  connect(state => ({
    auth: getAuth(state),
  }))(({ auth, ...props }) => {
    if (auth) {
      return <Component auth={auth} {...props} />;
    }

    // push to sign in if try access to component requires authentication
    history.push('/sign-in');
    return null;
  });

Использование:

<Route
    {...rest}
    component={loginGuard(AdminComponent)}
  />

Answer 3

Просто удалите свойство компонента в новом маршруте, например:

const DynamicComp = MeetingRoutes

 return <Route 
  createMeeting={createMeeting}
  path="/meetings"
  render={props =>
    createMeeting === true ? <DynamicComp {...props} createMeeting={createMeeting} /> : <Redirect to="/" />
  } />

Answer 4

Оберните ваш маршрут в троичный оператор и добавьте один компонент Redirect в конце маршрута.