在反应中处理多个帐户

Question

我正在开发一个 React JS 网络应用程序，它允许用户一次登录多个帐户。它类似于 Google 允许您使用多个帐户登录的方式。

我的问题是跟踪每个选项卡中正在使用的用户的最佳方式是什么？如果用户单击带有“在新选项卡中打开”的 link，我如何确保当前使用的帐户被传递到新选项卡？

Answer 1

查看 google 如何将用户包含在他们的链接中 - u/0、u/1、u/2。这可能会让您走上正确的道路。我会这样做，然后从 URL 中获取该参数，然后根据需要使用会话存储或 cookie。

评论讨论后编辑

我已经为您创建了一个代码沙箱，以了解如何使用 react-router-dom.

https://codesandbox.io/s/small-platform-jlwpg

浏览一下，一些值得注意的项目是：

路由器与 userId 参数的嵌套：

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route exact path="/mail" element={<Mail />}>
    <Route path=":userId" element={<Mailbox />} />
  </Route>
</Routes>

在Mail.jsx中使用<Outlet/>。没有这个，Mail 将不会呈现该子路由。
useParams钩子在Mailbox.jsx
中的使用

const { userId } = useParams();

在反应中处理多个帐户

Handle multiple accounts in react

reactjs

react-redux

react-router-dom