React Router v6下Route的element组件无法获取Context值如何解决

问题核心原因与解决方案 #

你遇到的useContext(AuthContext)返回undefined的问题，是两个常见错误共同导致的：一是react-router-dom v6的私有路由写法不符合版本规范，二是Context的覆盖层级或调用逻辑有误，按以下步骤修改即可解决：

1. 修正AuthContext Provider的挂载位置

确保AuthContext.Provider包裹整个应用的路由层级，保证所有路由组件都在Context的作用范围内，推荐在入口文件index.js中挂载：

// index.js 示例
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { AuthProvider } from './你的AuthContext文件路径'
import App from './App'

ReactDOM.render(
  <BrowserRouter>
    <AuthProvider> {/* Provider必须放在Routes的外层 */}
      <App />
    </AuthProvider>
  </BrowserRouter>,
  document.getElementById('root')
)

同时确认AuthProvider传入的value字段和你读取的字段完全一致，例如你要读取authState，就必须在Provider的value中显式声明该字段：

// AuthContext 定义示例
export const AuthContext = React.createContext()
export const AuthProvider = ({children}) => {
  const [authState, authReducer] = React.useReducer(/* 你的reducer逻辑 */)
  // 这里的value字段必须和你useContext时解构的字段完全匹配
  return <AuthContext.Provider value={{authState, authReducer}}>
    {children}
  </AuthContext.Provider>
}

2. 修正PrivateRoute的写法

react-router-dom v6不再支持私有路由返回Route组件，正确的私有路由只需返回鉴权后的渲染内容即可：

// PrivateRoute.jsx
import { useContext } from 'react'
import { Navigate, Outlet } from 'react-router-dom'
import { AuthContext } from './你的AuthContext文件路径'

const PrivateRoute = () => {
  const { authState } = useContext(AuthContext)
  // 新增初始化判空逻辑，避免Context初始化完成前报错
  if (!authState) return <div>加载中...</div>
  return authState.state.login ? <Outlet /> : <Navigate to="/login" replace />
}

export default PrivateRoute

3. 修正App.js中的路由配置

Route的element属性必须传入JSX节点，不能直接传入组件构造函数：

// App.js 示例
import { Routes, Route } from 'react-router-dom'
import PrivateRoute from './PrivateRoute'
import MainLayout from './MainLayout'
import EmptyLayout from './EmptyLayout'
import NotFound from './NotFound'

function App() {
  return (
    <Routes>
      {/* 私有路由统一嵌套在element为<PrivateRoute />的Route下 */}
      <Route element={<PrivateRoute />}>
        <Route path="/dashboard/*" element={<MainLayout />} />
      </Route>
      {/* 公开路由直接配置 */}
      <Route path="/auth/*" element={<EmptyLayout />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

export default App

排查兜底

如果修改后仍存在问题，按以下顺序排查：

• 确认AuthContext的导入路径完全正确，没有拼写错误
• 确认没有在组件中重复定义同名的AuthContext变量覆盖了全局导入的Context
• 确认你使用的react-router-dom v6版本没有beta版的API兼容问题，可升级到6.3+稳定版测试

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