React+Django+Webpack项目中React Router Link报useContext空值错误

核心问题 #

你的NavBar组件渲染在Router组件外部，导致react-router-dom的Link无法获取路由上下文（useContext返回null）——这是react-router-dom的强制要求：所有依赖路由上下文的组件（如Link、useNavigate等）必须包裹在Router内部。

步骤1：调整组件层级 #

修改App.js，将NavBar移入Router组件范围内：

<Router>
  <NavBar />
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

步骤2：确认依赖版本一致性 #

确保项目使用的react-router-dom是v6版本（与你代码中的Routes、elementAPI匹配），执行以下命令检查版本：

npm list react-router-dom

若版本不匹配，重新安装最新稳定版：

npm install react-router-dom@latest

步骤3：Django路由适配（可选但关键） #

由于使用前端路由，需配置Django捕获所有路由并指向你的入口HTML文件，避免刷新页面出现404：

# Django项目根urls.py
from django.urls import path, include
from django.views.generic import TemplateView

urlpatterns = [
    # 保留你的API接口路由
    path('api/', include('your_api_app.urls')),
    # 匹配所有前端路由，返回index.html
    path('', TemplateView.as_view(template_name='index.html')),
    path('<path:route>', TemplateView.as_view(template_name='index.html')),
]

验证Webpack配置 #

你的Webpack配置中historyApiFallback: true已经正确设置，这确保开发环境下前端路由的历史模式正常工作，无需修改。

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