React中引入Routes配置路由后页面空白如何解决？

页面白屏和路由配置无关，是代码里两处笔误导致编译渲染失败：

• JSX语法要求类名属性必须写为驼峰格式的className，你代码里<main>标签上写的是全小写classname，属性无法被React识别
• 你导入了Footer组件但没有书写对应的开标签渲染组件，反而直接写了</Footer>闭合标签，属于严重语法错误，会直接导致整个App组件无法编译。

你当前使用的react-router-dom v6版本的路由写法（Routes包裹Route、element属性传入页面组件）是完全正确的，不需要调整路由相关逻辑。

import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import HomeScreen from './screens/HomeScreen';

function App() {
  return (
    <Router>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            <Route path="/" element={<HomeScreen />} />
          </Routes>
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

替换原有错误代码保存后，页面即可正常渲染。

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