react 项目部署到 xampp htdocs 下指定目录下黑屏或白屏问题解决办法

 首先尝试网上说的办法：

 修改 Apache 的配置文件 httpd.conf

1. LoadModule rewrite_module modules/mod_rewrite.so  前注释取消，但是我打开配置文件时，就是没有注释的。

2. 在网站项目根目录下配置.htaccess 文件。比如在htdocs 目录下新建了一个文件夹 mywebsite, 把 react build 生成的 dist 目录中的文件都复制到  mywebsite  下，然后把 .htaccess 文件也放到  mywebsite 目录下。

.htaccess 文件 文件内容如下：
 

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /mywebsite/
  
  # 如果请求的文件存在，则直接提供该文件
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]
  
  # 所有其他请求都重写为 index.html
  RewriteRule . index.html [L]
</IfModule>

# 设置正确的MIME类型
<IfModule mod_mime.c>
  AddType application/javascript .js
  AddType text/css .css
</IfModule>

3. 配置打包配置文件，如项目使用vite 打包，则配置vite.config.ts ，增加 base 配置项。

 export default defineConfig({

   plugins: [react()],

   base: '/mywebsite/',      //需要增加此项

   server: {

     proxy: {

       '/api': {

结果还是老样子黑屏。

原因在于网上很多教程没说第4点：

4.  App.tsx 中路由的配置，Router 中需要增加一个属性basename

  return (
     <Router basename="/mywebsite">
       <Routes>
         <Route path="/home" element={<Home />} />
         <Route path="/publish" element={<Publish />} />
         <Route path="/index" element={<Home />} />
         <Route path="/" element={<Home />} />
         <Route path="/index.html" element={<Home />} />
       </Routes>
     </Router>
  );

经过以上四步终于解决。

第2步如果配置不正确，可能会打不开页面，或者在某些页面刷新报错 404 。

怎么排查到的？ 把 App.tsx 改为最简单的内容，无路由，发现可以正常显示。 

前人挖井好辛苦，心中还念后来人。