Как лучше реализовать защищённый react router?

Question

[mindgrow]

Используют React 16.14
Нужно сделать так, чтобы при переходе на определённые роуты, если пользователь не авторизован - выполнялся переход на роут по умолчанию.
Пока нашёл только это https://www.makeuseof.com/create-protected-route-i...
подозрительно что редирект выполняется не с помощью хуков.
Какой есть более современный способ реализации?

Answer 1

[вовчек]

Я использую так, если пользователя нет в стейте, то проверка не срабатывает, и производится редирект на ту страницу, которую я передал пропсом как redirectTo, а если пользователь есть, то он просто возвращает обычный роут.

const ProtectedRoute = ({isAllowed, redirectTo, ...props}) => {
    return isAllowed ?
        <Route {...props}/> : <Redirect to={redirectTo}/>
};

const App = () => {
    const user = useSelector(state => state.users.user);

    return (
        <Switch>
            <ProtectedRoute
                isAllowed={user}
                redirectTo="/"
                path="/new-artist"
                component={NewArtist}
            />
          
            <Route path="/register" component={Register}/>
            <Route path="/login" component={Login}/>

            <Route component={() => <h2>Not Found.</h2>}/>
        </Switch>
    );
};