javascript 更改镀 chrome 后退箭头按钮的行为

nuypyhwy 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(110)

当用户登录时，我将用户导航至聊天页面，但当我点击后退箭头[在图像中提供]时，它不允许我后退，因为当我点击时，它将我发送至http：//localhost：3000/login，并再次将我重定向至http：//localhost：3000/chat [因为如果令牌在localstorage中可用，我将用户发送至聊天页面]，那么我如何才能使用户点击后退箭头时，它将直接将用户导航至http：//localhost：3000/

路线

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

JavaScript

来源：https://stackoverflow.com/questions/75565721/changing-behaviour-of-chrome-back-arrow-button

1条答案

按热度按时间

jfewjypa1#

在处理受保护的路由和身份验证时，您可能应该使用重定向（REPLACE）导航操作，而不是导航（PUSH）导航操作。为此，请在Navigate组件上指定replace属性。这将更清晰地维护历史堆栈。

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

历史堆栈示例：
| 用户/UI操作|导航操作|堆栈|
| - ------|- ------|- ------|
| | | ["/"]|
| 单击链接进行聊天|推送“/聊天”|["/"、“/聊天”]|
| 身份验证重定向|替换“/登录”|["/"，“/登录”]|
| 用户登录，令牌更新|替换“/chat”|["/"、“/聊天”]|
| 单击浏览器后退按钮|流行音乐|["/"]|

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 更改镀 chrome 后退箭头按钮的行为

1条答案

相关问题

热门标签

最新问答