使用react-router-dom v6的React项目编译后显示空白页问题排查

问题概述 #

项目编译无报错，但运行后显示空白页面，问题出在添加用于认证的AuthContext之后。尝试过调整构建工具、降级react-router-dom、增减Header组件均无效，同时正在集成Material UI，疑惑是否与此相关。

核心问题原因 #

React Router v6的<Routes>组件仅允许直接嵌套<Route>或<React.Fragment>，你在<Routes>内部放置了<AuthProvider>和<Header>，这违反了路由组件的结构规则，导致路由无法正常渲染，进而页面空白。

修正方案 #

调整App.js的组件嵌套结构 #

将<AuthProvider>移到<Router>外层，确保所有需要访问AuthContext的组件（包括路由内的组件和Header）都能被Context覆盖，同时将<Header>移出<Routes>：

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { Container } from '@mui/material';
import { BrowserRouter as Router } from 'react-router-dom';

import NoMatchPage from './NoMatch';
import LoginPage from './components/Authentication/LoginPage';
import PrivateRoute from './utils/PrivateRoute';
import { AuthProvider } from './context/AuthContext';
import Header from './components/Header';
import HomePage from './components/Homepage';

const App = () => {
    return (
    <Container component="main" maxWidth="l">
      <AuthProvider>
        <Router>
          <Header />
          <Routes>
            <Route path="/home" element={<PrivateRoute><HomePage /></PrivateRoute>} />
            <Route path="/login" element={<LoginPage />} />
            <Route path='*' element={<NoMatchPage />} />
          </Routes>
        </Router>
      </AuthProvider>
    </Container>
  );
}

export default App;

补充检查点 #

• 确认PrivateRoute的实现符合React Router v6规范，正确处理路由守卫逻辑，避免因守卫代码错误导致页面无法渲染
• 确保所有调用useContext(AuthContext)的组件都处于<AuthProvider>的包裹范围内，避免出现Context值为undefined的报错

Material UI是否是诱因？ #

你的代码中Material UI的使用（<Container>、ThemeProvider等）是正常的，不是导致页面空白的原因，可以继续集成使用。

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