React项目页面无法渲染文本内容的问题求助

云上老周

2026-8-14

问题解决：React页面无内容显示的原因及修复

你的问题出在react-router-dom v6版本的路由配置错误，导致组件渲染报错，进而整个页面无法正常显示内容。具体问题点：

react-router-dom v6中，<Route>标签必须通过element属性指定要渲染的组件，你当前的<Route path='/' exact/>是空的，没有任何要渲染的内容，这会触发React渲染错误。
v6版本已经移除了exact属性，无需再添加。

修复后的代码

App.js

如果需要根路径渲染内容，给<Route>加上element属性：

import './App.css';
import Navbar from './Components/Navbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <div className='App'>
      <h1> Hi </h1>
      <Router>
        <Navbar/>
        <Routes>
          <Route path='/' element={<div>主页内容</div>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

如果根路径暂时不需要额外内容，直接删掉空的<Route>标签即可：

import './App.css';
import Navbar from './Components/Navbar';
import { BrowserRouter as Router, Routes } from 'react-router-dom'

function App() {
  return (
    <div className='App'>
      <h1> Hi </h1>
      <Router>
        <Navbar/>
        <Routes>
          {/* 暂时不需要路由内容时，Routes可以为空 */}
        </Routes>
      </Router>
    </div>
  );
}

export default App;