Changing behaviour of chrome back arrow button

Question

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/

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

score 2 · Answer 1 · answered Feb 26 '23 at 00:16

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	["/"]

score 0 · Accepted Answer · answered Mar 01 '23 at 16:30

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

Changing behaviour of chrome back arrow button

2 Answers2