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

Changing behaviour of chrome back arrow button – Reactjs

I am navigating the user to chat page when the user login but when the I click on back arrow[provided in image] then it won’t let me to move back cause when I click on that it sends me to http://localhost:3000/login and again it will redirect me to http://localhost:3000/chat [because I am sending user to chat page if the token is available in localstorage] so how can i make that when the user click on back arrow it will directly navigate user to http://localhost:3000/
Image

Routes

  const { token } = useSelector((state) => state.auth);

  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route
          path="login"
          element={!token ? <Login /> : <Navigate to="/chat" />}
        />
        <Route path="register" element={<Register />} />
      </Route>
      <Route path="/chat">
        <Route
          index
          element={token ? <ChatPage /> : <Navigate to="/login" />}
        />
      </Route>
    </Routes>
  );
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After searching almost a week and with the help of Drew Reese answer and This post I found my answer that I have to use replace in Navigate Hook to achieve what i want like

     const { token } = useSelector((state) => state.auth);

  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route
          path="login"
          element={!token ? <Login /> : <Navigate to="/chat" replace/>}
        />
        <Route path="register" element={<Register />} />
      </Route>
      <Route path="/chat">
        <Route
          index
          element={token ? <ChatPage /> : <Navigate to="/login" replace/>}
        />
      </Route>
    </Routes>
  );

  2. 0

    You should probably use redirect (REPLACE) navigation actions instead of navigate (PUSH) navigation actions when dealing with protected routes and authentication. To do this specify the replace prop on the Navigate component. This will more cleanly maintain a history stack.

    const { token } = useSelector((state) => state.auth);

return (
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
      <Route path="contact" element={<Contact />} />
      <Route
        path="login"
        element={token
          ? <Navigate to="/chat" replace /> // <-- Redirect
          : <Login />
        }
      />
      <Route path="register" element={<Register />} />
    </Route>
    <Route
      path="/chat"
      element={token
        ? <ChatPage />
        : <Navigate to="/login" replace /> // <-- Redirect
      }
    />
  </Routes>
);

    History stack example:

    User/UI Action Nav Action Stack
    ["/"]
    Click link to chat PUSH "/chat" ["/", "/chat"]
    Auth redirect REPLACE "/login" ["/", "/login"]
    User logs in, token updates REPLACE "/chat" ["/", "/chat"]
    Click browser back button POP ["/"]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search