Question 333863 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Two React Routes behave differently. Can someone please explain, I've been looking for answers for days

I have these two routes in my App component, The user property is from a context. When the user log in, their email gets saved in local storage, then I try to read it in my context.

UserContext.js

const [user, setUser] = useState(null);

useEffect(() => {
   if (!localStorage.getItem("user")) {
      return;
   } else {
      setUser(localStorage.getItem("user"));
   }   
}, []);

App.jsx

const { user } = useContext(UserContext);

<Route
   path="create"
   element={user ? <Create /> : <Navigate to="/login" />}
/>
<Route
   path="dashboard"
   element={user ? <Dashboard /> : <Navigate to="/login" />}
/>

If the user is not logged in they can’t visit those two routes and should be directed to login page, that works. However when user is logged in, I can go to /dashboard and it’s fine, BUT if I go to /create, React redirects to /dashboard. It’s wrecking my head, why is that? what am I missing? Thank you all

This happens when I manually type the url in address bar or I refresh the /create page. Even though I am logged in I get redirected to /dashboard. Thanks

UPDATE

I think what is happening is that redirect happens before user value is set. if I set the user value directly from the local storage, like this: const user = localStorage.getItem('user'), then it works the way it should. But then again it is hurting my brain because this happens only on /create page.

Tags:

3

Answers


  1. 0

    It appears that you might be using relative paths in your route configurations, which can cause issues when navigating directly to URLs. Instead, use absolute paths starting with a forward slash /.

    <Route
   path="/create"
   element={user ? <Create /> : <Navigate to="/login" />}
/>
<Route
   path="/dashboard"
   element={user ? <Dashboard /> : <Navigate to="/login" />}
/>
    Login or Signup to reply.
  2. 0

    It seems like there might be a redirect set up on the login page, and if the user is already logged in, it’s automatically redirecting to the dashboard. To address this issue, consider using a query parameter for each page.

    I guess what is happening then is when you go to the create page it checks for a user but for the first time user data may not be available hence react will route you to the login page but you’re already login hence in the login page you had set that if user login then redirect to dashboard. hence you’ll be redirected to the dashboard every time.

    Redirect Logic on Login Page:
    Check if there is redirection logic on the login page that automatically directs a logged-in user to the dashboard. Ensure this logic aligns with your desired behavior.

    Use Query Parameters for Each Page:
    Instead of relying solely on the user’s login status for redirection, consider using query parameters for each page. This provides a more explicit way to handle redirection based on specific conditions.

    Debugging:
    If the issue persists, use debugging tools or add console logs to trace the flow of authentication and redirection logic.

    Provide Additional Details:
    If you encounter challenges or need more assistance, share additional details about your authentication setup, including how the login redirection is implemented

    Login or Signup to reply.
  3. 0

    The initial user state is null, e.g. a falsey value, so when you are manually changing the URL in the address bar the page is reloaded and any user state is reset and the initial null value is used for the initial render cycle until the useEffect hook runs and reads from localStorage.

    Use a lazy state initializer function to provide the initial user state from localStorage, and use the useEffect hook to persist any user state changes to localStorage.

    Example:

    const [user, setUser] = useState(() => {
  return JSON.parse(localStorage.getItem("user"));
});

useEffect(() => {
  localStorage.setItem("user", JSON.stringify(user));
}, [user]);

    To handle protecting routes/content then see my answer here for implementing standard route protection.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search