如何將 props 傳遞給 React Router 路由

Question

我正在嘗試將數據從 App 傳遞到 Home 組件，但我不知道在這種情況下如何。

在我的 App.js 中，我有 firebase auth，它在登錄時保存電子郵件。我需要將它傳遞給 Home 組件，但我不知道在這種情況下如何。我知道如何通過執行諸如<Home user={user}>類的事情來傳遞數據<Home user={user}>這個但不是現在。

我應該在哪里將傳遞的數據放在這樣的代碼中？

<Route exact  path="/" component={Home} />

我在 CodeSandbox 中附加了我的代碼

有 App.js Home.js 和 Login.js

我在 App.js 中所做的是呈現頁面，並且只有在登錄時才能看到頁面。 Login.js 使用 firebase auth 登錄，最后在 Home 組件中，我想打印出用戶的電子郵件。

有人可以給我線索或幫助我嗎？？ 我會非常感謝:))

Answer 1

要將 props 傳遞給 react-router 路由，您必須使用稍微不同的語法

<Route
  exact
  path='/'
  render={(props) => <Home {...props} auth={authState} />}
/>

在這種情況下， authState將是您的authState用戶數據。 它可以是一個布爾值，或者你想作為道具傳遞的任何其他數據。

然后在您的 Home 組件中，您將收到道具並可以隨意使用它：

function Home({auth}) {
  return (
    <div>
      {auth ? <h1>Logged In</h1> : <h1>Logged Out</h1>}
    </div>
  );
}