如何将道具传递到React Router路线

Question

我正在尝试将数据从App传递到Home组件，但在这种情况下我不知道如何。

在我的App.js中，我具有firebase身份验证，该身份验证在登录时保存电子邮件。我需要将其传递给Home组件，但我不知道在这种情况下如何。我知道如何通过执行类似<Home user={user}>的操作来传递数据，但现在不行。

我应该将传递数据放在这样的代码中吗？

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

我在CodeSandbox中附加了我的代码

https://codesandbox.io/s/heuristic-mestorf-8qbx9?fontsize=14&hidenavigation=1&theme=dark

有App.js Home.js和Login.js

我在App.js中所做的是呈现页面，并且仅在登录时才能看到页面。Login.js使用firebase auth登录，最后使用Home组件登录，我想打印出用户的电子邮件。

有人可以给我提示或帮我吗？我将非常感激：））

Answer 1

要将道具传递到React-Router路线中，您必须使用略有不同的语法

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

在这种情况下，authState将是您的Firebase用户数据。它可以是布尔值，也可以是您想作为道具传递的任何其他数据。

然后在您的Home组件中，您将收到道具并可以根据需要使用它：

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