如果会话在反应路由器 6 中过期，则重定向到登录页面或登录页面

Question

In my React App,I need to redirect the current page to landing page if session expires, I am using the

"react-router-dom": "^6.2.2",

My session expiration time is 60. I am doing the private routing with following approach,

export const getCurrentUser = () => async (dispatch) => {
    try {
        const res = await axios.get(BASE_URL + GET_CURRENT_USER_URL, { withCredentials: true });
        localStorage.setItem('orgId', res.data.orgId);
        dispatch({
            type: GET_CURRENT_USER,
            payload: res.data
        });

        return res.data;
    } catch (err) {
        console.log(err);
    }
};
export default function PrivateOutlet() {
    const [isLoaded, setIsLoaded] = useState(false);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getCurrentUser())
        .then((res) => {
            setIsLoaded(true);
            localStorage.setItem('orgId', res.orgId);
        })
        .catch(error => console.log(error) );
    }, [dispatch]);

    return   ( isLoaded ? (localStorage.getItem('orgId') !== undefined) ? <Outlet /> : <Navigate to="/landingPage" /> : <></>)

};


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

By using this approach, if I reload the page it is redirecting to landing page but,If I not doing the reload and lets say I trigger any event it is showing nothing since Backend APIs are returning nothing since session has been expired.

So If session expired How I redirect the current page to landing page if I trigger any click or any event?

Answer 1

add state for error:

const [isError, setIsError] = useState(false);

set error state when result is failed:

.catch(error => setIsError(true) );

and before base return with isLoaded check add:

if (isError) {
   return <Navigate to="/landingPage" replace={true} />
}