Как создать правила перенаправления в React без перенаправления на тот же маршрут?

Question

У меня есть файл с именем AuthenticatedRoute.tsx, который используется в моем файле Router.tsx в качестве шаблона для всех моих защищенных / аутентифицированных маршрутов.

export default ({ component: C, authUser: A, path: P, exact: E }:
    { component, authUser, path, exact }) => (
        <Route
            exact={E}
            path={P}
            render={props =>
                getRender(A, P, props, C)
            }
        />
    );

Функция getRender выполняет следующее:

const getRender = (user, path, props, C) => {
    if (user) {
        if (!user.country) {
            return <Redirect to={'/select-country'} />;
        } else if (!user.phoneNumber) {
            return <Redirect to={'/add-phone'} />;
        } else if (!user.phoneNumberVerified) {
            return <Redirect to={'/verify-phone'} />;
        } else if (path === '/select-country' || path === '/add-phone' || path === '/verify-phone') {
            return <Redirect to={'/dashboard'} />;
        } else {
            return <C {...props} authUser={user} />;
        }
    } else {
        return <Redirect to={'/signin'} />;
    }
};

Все вышеописанное пытается перенаправить пользователя на другой маршрут, если его профиль не завершен.

1. Если у пользователя нет страны, перенаправьте его на страницу выбора страны.
2. Если у пользователя нет номера телефона, перенаправьте его на страницу добавления номера телефона.
3. Если номер телефона пользователя не подтвержден, перенаправьте его на страницу подтверждения номера телефона.
4. Если пользователь находится на любом из вышеперечисленных маршрутов и уже имеет эти данные, перенаправьте его на панель управления.
5. Наконец, если правила не были соблюдены, просто визуализируйте компонент / маршрут, который они пытались получить.

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

Warning: You tried to redirect to the same route you're currently on: "/select-country"

Я попытался добавить больше логики, например:

if (!user.country && path !== '/select-country') {
    return <Redirect to={'/select-country'} />;
}

Хотя я получаю бесконечное перенаправление:

Error: Maximum update depth exceeded.

Как я могу решить проблему перенаправления на эти маршруты, когда пользователь не полностью заполнил свой профиль?

Answer 1

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

Мы можем переписать это как:

const getRender = (user, path, props, C) => {
    const currentPage = <C {...props} authUser={user} />;

    if(!user) {
        return path === '/select-country' ? currentPage : <Redirect to={'/signin'} />;
    }

    if (!user.country) {
        return path === '/select-country' ? currentPage : <Redirect to={'/select-country'} />;
    }

    if (!user.phoneNumber) {
        return path === '/add-phone' ? currentPage : <Redirect to={'/add-phone'} />;
    }

    if (!user.phoneNumberVerified) {
        return path === '/verify-phone' ? currentPage : <Redirect to={'/verify-phone'} />;
    }

    if (path === '/select-country' || path === '/add-phone' || path === '/verify-phone') {
        return <Redirect to={'/dashboard'} />;
    }

    return currentPage;
};