在反应中处理多个帐户答案

【问题标题】：Handle multiple accounts in react在反应中处理多个帐户
【发布时间】：2021-12-18 07:55:51
【问题描述】：

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

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

【问题讨论】：

你不能只使用会话存储吗？
我正在查看，但问题是我需要在使用链接时从一个页面传递到另一个页面的内容，但如果打开新选项卡则不存在。我不认为会话存储可以做到这一点。

标签： reactjs react-redux react-router-dom

【解决方案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>

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

const { userId } = useParams();

【讨论】：

我看到了，并且还在考虑可以将 /:ID/ 作为我所有路线的根。但不确定这是否是最好的方法。
是的，google auth 系统非常复杂，但是在玩了足够多的 firebase auth 之后，我相信它或多或少都在遵循这个原则
到目前为止，我找不到任何建议如何创建“/:id/”根路由和所有其余路由作为子路由的信息。反应路由器甚至会这样做吗？知道去哪里看吗？
我已经使用代码沙箱更新了答案，以帮助您使用子路由设置 react-router-dom。
查看了您的沙箱，但它似乎没有解决 ID 下面的子路由。例如，在 Google Drive 上，您可能会看到“drive.google.com/u/1/folder/filename”。我能够弄清楚如何将 ID 作为最终项目，但我似乎无法弄清楚该 ID 包含在其下方的其他路线的路线中。