如何向React Router路由传递props？Firebase Auth用户邮箱传参问题

嘿，我来帮你搞定这个问题！你已经知道通过<Home user={user}>传参，但在React Router的Route组件里用component属性时没法直接加自定义props对吧？这里有两种简单的解决方案，看你需求选：

方法一：使用render属性代替component #

这是最直接的方式，把component换成render函数，就能在渲染Home的时候把user传进去，同时还能保留路由自带的props（比如history、location这些）：

// 在App.js里修改Route
<Route 
  exact path="/" 
  render={(routeProps) => <Home {...routeProps} user={user} />} 
/>

然后在Home组件里，你就能通过props拿到user了：

// Home.js（函数组件示例）
function Home(props) {
  return (
    <div className="home">
      <h2>Welcome back!</h2>
      {/* 用可选链?.避免user还未加载时的报错 */}
      <p>Your email: {props.user?.email}</p>
    </div>
  );
}

// 如果是类组件，就用this.props.user.email

解释一下：render函数会接收React Router提供的路由props，用...routeProps把这些props传递给Home，同时加上我们自定义的user属性，这样Home既能用路由相关的功能，又能拿到用户邮箱。

方法二：使用React Context（适合多组件需要用户数据的场景） #

如果你的应用里不止Home组件需要用户数据，比如导航栏、个人中心都要用到，那用Context会更省心，不用一层一层传props：

1. 在App.js里创建并导出UserContext：

import { createContext, useState, useEffect } from 'react';
import { auth } from './firebase';

// 创建Context，默认值设为null
export const UserContext = createContext(null);

function App() {
  const [user, setUser] = useState(null);

  // Firebase Auth监听用户状态
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  return (
    // 用Provider包裹所有需要访问user的组件
    <UserContext.Provider value={user}>
      {/* 你的路由和其他组件 */}
      <Route exact path="/" component={Home} />
      {/* 其他路由... */}
    </UserContext.Provider>
  );
}

2. 在Home.js里使用Context获取user：

import { useContext } from 'react';
import { UserContext } from './App';

function Home() {
  const user = useContext(UserContext);
  return (
    <div className="home">
      <h2>Welcome back!</h2>
      <p>Your email: {user?.email}</p>
    </div>
  );
}

这样不管Home在哪个层级，都能直接拿到user数据，不用再手动传props啦。

两种方法都能解决你的问题，要是只有Home需要用户数据，用方法一就够了；如果后续有更多组件需要，方法二更适合。

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