React搭配Webpack配置React Router时路由组件不加载如何解决

路由无法加载和Webpack配置无关，核心是你使用的v6版本react-router-dom的API写法错误：

• v6版本的<Route>组件已经废弃了component属性，渲染路由内容需要使用element属性，属性值直接传入JSX元素即可
• v6版本默认对路径做精确匹配，不需要额外添加exact标识
• 就算是v5及更早版本，component属性也要求传入组件引用而非JSX实例，你写的component={<Home/>}本身也不符合旧版API规范
  另外注意引入组件时的路径大小写匹配：如果你的组件文件名为App.js（首字母大写），index.js里的引入路径要写import App from './App'，不要写成./app，避免大小写敏感系统下模块加载失败。

修正后的App.js #

import { Route, Routes, BrowserRouter as Router } from 'react-router-dom';
import Home from './Home';
const App = () => {
  return (
    <Router>
      <h1>React Router Example</h1>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/login" element={<h1>Login</h1>} />
      </Routes>
    </Router>
  );
};

export default App;

其他配置说明 #

• 你当前webpack配置中devServer.historyApiFallback: true是正确配置，开发环境下访问子路由不会出现404问题
• 生产环境打包部署时，需要给静态服务器配置路由重写规则，将所有路径请求都指向index.html，否则直接访问/login这类子路径会报404，这是history模式路由的通用要求，和Webpack本身逻辑无关
• 既然你不使用Router时可以正常渲染单个组件，说明babel-loader的JSX解析配置、React相关依赖安装都是正常的，不需要额外调整webpack的loader规则

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