react项目打包后点击index.html页面出现空白

1.浏览器F12查看报错原因
2.在package.json文件中添加 “homepage”: “./” 如下

 "version": "0.1.0",
 "homepage": "./",

这样在你点击index.html时候路径没有问题不会报错,但是页面可能还是空白的

3.然后将项目中的引用路由时候的BrowserRouter改为HashRouter,所有用到的地方都要改

import React from "react";
import { Navigate } from "react-router-dom";
import { HashRouter, Routes, Route } from "react-router-dom";
import routes from "./routers"; // Import your route configuration
function App() {
  return (
    <div className="App">

        <HashRouter>
          <Routes>
            {routes.map((route) => (
              <Route
                key={route.path}
                path={route.path}
                element={<route.component />}
              />
            ))}
            <Route key="/" path="/" element={<Navigate to="/home" />} />
          </Routes>
        </HashRouter>
     
    </div>
  );
}

export default App;