如何正确结合React Context与react-router-dom？我的写法错在哪里？

你的问题出在对 React Context 的使用方式理解有误，下面直接说问题和正确写法：

错误点分析 #

1. <AuthContext.RouterProvider> 完全错误
   AuthContext 是通过 createContext 创建的上下文对象，它并没有 RouterProvider 这个属性。RouterProvider 是 react-router-dom 提供的路由组件，和 AuthContext 是完全独立的两个东西，不能混在一起写。

2. 直接用 <AuthContext> 包裹组件无效
   createContext 创建的上下文必须通过它的 Provider 组件（即 <AuthContext.Provider>）来提供共享数据，而且必须传递 value 属性，把你要共享的状态、方法等内容传进去，否则子组件无法获取到上下文数据。

正确写法示例 #

首先，我们需要用 AuthContext.Provider 包裹 RouterProvider，同时把需要共享的认证状态（比如登录状态、登录/登出方法）通过 value 传递进去。如果需要动态修改登录状态，建议用 useState 来管理：

import { useState } from "react";
import { AuthContext } from "./AuthContext";
import { RouterProvider } from "react-router-dom";

const App = () => {
  // 用 useState 管理登录状态，方便后续修改
  const [isLogin, setIsLogin] = useState(false);

  // 把状态和修改方法打包成 context 的值
  const authContextValue = {
    isLogin,
    setIsLogin // 后续组件可以调用这个方法修改登录状态
  };

  return (
    // 必须用 AuthContext.Provider，且传入 value
    <AuthContext.Provider value={authContextValue}>
      {/* 根据登录状态切换路由配置，简化成三元表达式 */}
      <RouterProvider router={isLogin ? privateRoute : publicRoute} />
    </AuthContext.Provider>
  );
};

export default App;

后续使用上下文 #

在路由下的任意组件里，你都可以通过 useContext 获取共享的认证状态：

import { useContext } from "react";
import { AuthContext } from "./AuthContext";

const SomeComponent = () => {
  const { isLogin, setIsLogin } = useContext(AuthContext);

  // 比如点击按钮切换登录状态
  const handleLogin = () => {
    setIsLogin(true);
  };

  return (
    <div>
      {isLogin ? "已登录" : "未登录"}
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

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