Функция ProtectedRoutes. Как вызвать избыточный метод useSelector ()

Question

Мой текущий AppRoutes выглядит следующим образом.

<Switch>
    <ProtectedRoute
        exact
        path="/"
        component={Home}
    />
    <Route path="/login" component={Login} />
</Switch>

Я сделал функцию ProtectedRoute

const { isAuthenticated, isAuthenticating } = useSelector(state => state.auth)

const ProtectedRoute = ({ component: Component, ...rest }) => (    
    <Route
      {...rest}
      render={props =>
        isVerifying ? (
          <Loading />
        ) : isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );

До того, как я использовал ее в AppRoutes, но я решил Перейдите в мою функцию ProtectedRoute, чтобы она выглядела чище и несла ответственность, а не передавала ее как реквизит.

Но я получаю следующую ошибку:

Недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела компонента функции.

Я получаю ошибку, потому что я объявил ее вне функции, и мне было интересно, где мне нужно разместить ее, а также есть ли там лучший подход для обработки ProtectedRoutes?

Answer 1

Не могли бы вы сохранить его внутри ProtectedRoute компонента?

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const { isAuthenticated, isAuthenticating } = useSelector(state => state.auth)
  return (    
    <Route
      {...rest}
      render={props =>
        isVerifying ? (
          <Loading />
        ) : isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  )
}