Ограничение доступа к роутам не авторизованных пользователей React

Question

Как сделать приватные роуты на функциональных компонентах, которые были бы доступные только авторизованым пользователям? Как сделать на класовых я знаю(через HOC), а с функциональными ничего нормального на ум не приходит. Буду благодарен за любую помощь))

Answer 1

Собственно через HOC вам это и стоит делать, один компонент будет содержать в себе другой компонент который надо закрыть.

Пример: <Auth path = "/ login" component = {Another} />.

Где Auth - это компонент, который закрывает нужные компоненты.

Сам компонент Auth будет выглядеть примерно так:

function Auth({ component: Component, ...rest }) {
  const counter = useSelector(state => state);
  return (
    <Route
      {...rest}
      render={props =>
        counter ? <Component {...props} /> : <Redirect to="/sign" />
      }
    />
  );
}
export default Auth

А вообще на dev.to есть классная статья на эту тему: https://dev.to/mychal/protected-routes-with-react-function-components-dh.

Answer 2

делаем такой компонент:

const PrivateOutlet = () => {
   const location = useLocation();
   const { authStore } = useContext(Context);
  return authStore.isAuth ? (
    <Outlet />
  ) : (
    <Navigate to="/" state={{ from: location }} />
  );
};

и потом оборачиваем в него там где те компоненты которые хотим сделать приватными:

 <Route path="/" element={<PrivateOutlet />}>
   <Route path="/home" element={<HomePage />} />
 </Route>

БЛОГ НА HUSL

Ограничение доступа к роутам не авторизованных пользователей React

Ответы (2 шт):