How to create redirect rules in React without redirecting to same route?

Question

I have a file called AuthenticatedRoute.tsx that is used in my Router.tsx file as a template for all of my protected/authenticated routes.

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)
            }
        />
    );

The getRender function runs the following:

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'} />;
    }
};

All the above is trying to do is redirect the user to a different route if their profile is not complete.

1. If user does not have a country, redirect them to the select country page.
2. If user does not have a phone number, redirect them to the add phone number page.
3. If user's phone number if not verified, redirect them to the verify phone number page.
4. If user is on any of the above routes and already has that data, redirect to the dashboard.
5. Lastly, if no rules were met, just render the component/route they were attempting to get.

The issue that is occurring here is that if the user attempts to go to the select country or add phone number routes, a console error appears:

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

I attempted to add more logic, like the following:

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

Although I get an infinite redirect happening:

Error: Maximum update depth exceeded.

How can I solve the issue of redirecting to these routes when a user has not filled in their profile fully?

Answer 1

The reason why path check is not working seems to be the redirect to dashboard. User is redirected to select country, then the check for that has no return and continues to the check that goes to dashboard, which leads to checking the country, which leads to going to select country, etc.

We can rewrite this like:

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;
};