TTC
Theo's Typesafe Cult•2d ago
void.

React Routing Question.

hey yall! im currently working on a side project with a react frontend and typescript/node backend. here is the router configuration: 
import { createBrowserRouter } from "react-router";
import Login from "./ui/Form/AuthForm/LoginForm";
import Landing from "./ui/Landing/Landing";
import Signup from "./ui/Form/AuthForm/SignupForm";
import Discover from "./ui/Discover/Discover";
import ProtectedRoute from "./Protected";
import AuthProvider from "./core/context/auth.context";
import CreateJot from "./ui/CreateJot/CreateJot";
import NotFoundError from "./ui/Errors/NotFoundError";

const router = createBrowserRouter([
  {
    path: "/",
    element: <AuthProvider />,
    children: [
      {
        path: "",
        element: <Landing />,
      },
      {
        path: "/login",
        element: <Login />,
      },

      {
        path: "/signup",
        element: <Signup />,
      },

      {
        path: "/client",
        element: <ProtectedRoute />,
        children: [
          {
            path: "discover",
            element: <Discover />,
          },
          {
            path: "create",
            element: <CreateJot />,
          },
        ],
      },
    ],
    errorElement: <NotFoundError />
  },
]);

export default router;
import { createBrowserRouter } from "react-router";
import Login from "./ui/Form/AuthForm/LoginForm";
import Landing from "./ui/Landing/Landing";
import Signup from "./ui/Form/AuthForm/SignupForm";
import Discover from "./ui/Discover/Discover";
import ProtectedRoute from "./Protected";
import AuthProvider from "./core/context/auth.context";
import CreateJot from "./ui/CreateJot/CreateJot";
import NotFoundError from "./ui/Errors/NotFoundError";

const router = createBrowserRouter([
  {
    path: "/",
    element: <AuthProvider />,
    children: [
      {
        path: "",
        element: <Landing />,
      },
      {
        path: "/login",
        element: <Login />,
      },

      {
        path: "/signup",
        element: <Signup />,
      },

      {
        path: "/client",
        element: <ProtectedRoute />,
        children: [
          {
            path: "discover",
            element: <Discover />,
          },
          {
            path: "create",
            element: <CreateJot />,
          },
        ],
      },
    ],
    errorElement: <NotFoundError />
  },
]);

export default router;
my questions is: - say an authenticated user visits /client/create which renders the CreateJot component. - now, lets assume the user refreshes his/her's page. - now, on refresh the page does not redirect back the page the user was in and redirects to /client/discover. (this is most likely due to the navigate('/client/discover') call i have in the AuthProivder component. how do i redirect the user based on the page he/she was in? for now, i can only think of storing the current page state in localStorage and updating it each time and using that for redirection.
4 Replies
void.
void.OP•2d ago
my AuthProvider code: 
import { createContext, useContext, useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router";
import { apiGetRequest } from "../utils/request.utils";
import { IAuthenticatedStatus } from "../types/auth/login.types";
import { ApiErrorResponse, ApiSucessResponse } from "../types/api/response";

interface ProviderProps {
  isAuthenticated: boolean;
  setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
}

const AuthContext = createContext<ProviderProps>({
  isAuthenticated: false,
  setIsAuthenticated: () => {},
});


export default function AuthProvider() {
  const navigate = useNavigate();
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const location = useLocation();

  useEffect(() => {
    async function fetchUserAuthenticationStatus() {
      const response = await apiGetRequest<
        ApiErrorResponse | ApiSucessResponse<IAuthenticatedStatus>
      >("auth/status");
      if (response.success) {
        setIsAuthenticated(response.data.status);
        navigate("/client/discover");
      }
    }

    fetchUserAuthenticationStatus();
  }, [isAuthenticated]);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      <Outlet />
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}
import { createContext, useContext, useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router";
import { apiGetRequest } from "../utils/request.utils";
import { IAuthenticatedStatus } from "../types/auth/login.types";
import { ApiErrorResponse, ApiSucessResponse } from "../types/api/response";

interface ProviderProps {
  isAuthenticated: boolean;
  setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
}

const AuthContext = createContext<ProviderProps>({
  isAuthenticated: false,
  setIsAuthenticated: () => {},
});


export default function AuthProvider() {
  const navigate = useNavigate();
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const location = useLocation();

  useEffect(() => {
    async function fetchUserAuthenticationStatus() {
      const response = await apiGetRequest<
        ApiErrorResponse | ApiSucessResponse<IAuthenticatedStatus>
      >("auth/status");
      if (response.success) {
        setIsAuthenticated(response.data.status);
        navigate("/client/discover");
      }
    }

    fetchUserAuthenticationStatus();
  }, [isAuthenticated]);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      <Outlet />
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}
bythewayitsjosh
bythewayitsjosh•2d ago
To clarify, is this the process?: - Authenticated user visits /client/create - They refresh their page while on that page What do you want to happen in that case? Typically if the user is authenticated and they're on the 'login' page (which seems like what you have essentially with the /client/create here), they would be automatically redirected to some page, like the home page or something. Is that what you want to happen, or do you want to redirect the user to whatever page they happened to be on before they navigated to /client/create?
void.
void.OP•2d ago
never mind, i figured it out. what i wanted was when the user refreshes the page, i wanted the user to be redirected to the same page the user was in (the page from where the refresh happened). with my logic above it always redirected to /client/discover. I removed that line.
bythewayitsjosh
bythewayitsjosh•2d ago
Ah no worries, glad you figured it out.

Did you find this page helpful?