使用 React Router 将 Firebase Auth 用户发送到组件答案

【问题标题】：Send Firebase Auth user to component with React Router使用 React Router 将 Firebase Auth 用户发送到组件
【发布时间】：2020-03-29 08:48:33
【问题描述】：

我使用 React Router 和 Firebase 构建我的项目。我的路由器看起来像：

...

<Router>
    <div className="App">
      <Header user={{ ...currentUser }} />
         <Route
            exact
            path="/profile"
            component={currentUser => (
               <Profile
                 {...currentUser}
                 user={currentUser}
                />
            )}
         />
...

如果我将currentUser 作为道具发送（如在Header 中），它会起作用，我可以得到所有attributes。但是如果我通过Route 发送它，我只会得到undefined。我认为这是因为组件在 firebase 向我的用户请求发送答案之前呈现。但我不知道如何解决这个问题或如何在本地保存我的currentUser（我尝试将它保存在我的Session Storage 中，但我猜这不是一个好的实现）。

感谢您的每一次帮助！

【问题讨论】：

标签： javascript reactjs firebase firebase-authentication react-router

【解决方案1】：

您可以在用户登录时使用localStorage轻松获取数据：

用户登录后：

localStorage.setItem("username", currentUser);

在下一页：

let name = localStorage.getItem("username");
console.log(name);

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【讨论】：

谢谢！我只是想知道这是否是一个保存解决方案？您是在生产中使用它还是仅在个人项目中使用它？
因为通过 localStorage 传递用户数据并不常见。在 firebase 的情况下，解决此问题的最佳方法是将所有内容包装在 AuthProvider 中并使用状态进行处理。
传入localStorage其实很常见