React Router Dom配置后组件不渲染问题如何解决

当前路由配置使用了React Router v5的旧语法，和你安装的v6版本API不兼容，直接导致路由组件无法渲染，核心错误有两处：

• v6中<Route>组件通过element属性接收渲染内容，属性值需要传入JSX元素，不再支持v5的component属性传组件引用的写法
• v6默认对路径做精确匹配，不需要再写exact属性声明
• 你提供的HomePage组件代码无语法问题，无需修改

替换App组件中的路由配置部分即可，完整可运行代码如下：

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Routes
} from 'react-router-dom';
import HomePage from './pages/HomePage';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Routes>
            <Route path="/" element={<HomePage />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;

保存修改后刷新页面，访问根路径即可正常看到HomePage的所有内容。

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