React：如何将Route渲染属性传递给嵌套组件？（@react-firebase/auth场景下）

问题 #

我正在使用npm包@react-firebase/auth处理认证状态。我无法为FirebaseAuthConsumer组件添加属性，但它被渲染在路由处理器与嵌套组件之间，代码示例如下：

<Route path="/admin/:campaignId" render={({ match, history }) => (
  <FirebaseAuthConsumer> 
    //-----此处无法添加属性
    {({ isSignedIn, user, providerId }) => {
      return isSignedIn ? (
        <CreateScreen match={match}//----如何将属性传递到这里？
                      history={history} 
                      editMode={true} />
      ) : (
        <Link to="/login">Login</Link>
      );
    }}
  </FirebaseAuthConsumer>
)}></Route>

请问如何将路由渲染函数中的属性传递给CreateScreen组件？提前致谢！

回答 #

嘿，你其实已经用对方法啦！😉

你当前代码里的写法完全可行——因为Route的render函数接收的match、history这些参数，处于FirebaseAuthConsumer回调函数的作用域范围内，所以你可以直接把它们传递给CreateScreen组件，就像你现在做的这样。

如果想让代码更简洁，还可以用对象展开语法一次性传递所有路由相关的props：

<Route path="/admin/:campaignId" render={(routeProps) => (
  <FirebaseAuthConsumer> 
    {({ isSignedIn }) => {
      return isSignedIn ? (
        // 展开routeProps会自动传递match、history、location等属性
        <CreateScreen {...routeProps} editMode={true} />
      ) : (
        <Link to="/login">Login</Link>
      );
    }}
  </FirebaseAuthConsumer>
)}></Route>

原理说明 #

FirebaseAuthConsumer的回调函数是定义在Route的render函数内部的，所以它可以直接访问到外部作用域里的所有变量（包括match和history）。你根本不需要给FirebaseAuthConsumer本身添加任何属性，回调函数天然就能拿到这些值~

内容的提问来源于stack exchange，提问作者Mendi Sterenfeld