如何将 props 传递给 React Router 路由答案

【问题标题】：How to pass props to a React Router route如何将 props 传递给 React Router 路由
【发布时间】：2020-04-02 10:57:11
【问题描述】：

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

在我的 App.js 中，我有登录时保存电子邮件的 firebase 身份验证。我需要将它传递给 Home 组件，但我不知道在这种情况下如何。我知道如何通过像 <Home user={user}> 这样的方式传递数据，但现在不行。

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

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

我在 CodeSandbox 中附加了我的代码

App.js 有 Home.js 和 Login.js

我在 App.js 中所做的是渲染页面，并且只在登录时查看页面。 Login.js 正在使用 firebase auth 登录，最后在 Home 组件中，我想打印出用户的电子邮件。

有人可以给我线索或帮助我吗？我将非常感谢:))

【问题讨论】：

【解决方案1】：

要将 props 传递到 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>
  );
}

【讨论】：