reactJS 路由，错误 500 和 .htaccess：重写规则不适用于子路由

编程问答 2022-05-23

问题描述

我基于 create-react-app 构建了一个 React 应用。

在 package.json 中，我使用了 '.'作为主页的价值：

{
    ...
    "homepage": ".",...
}

但是在部署时，我遇到了 500 个服务器错误；其中I fixed by adding some htaccess stuff；在重写规则的顶部强制使用 HTTPS：

<IfModule mod_rewrite.c>

    #force HTTPS
    RewriteEngine On 
    RewriteCond %{HTTPS} off 
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    #fix 500 errors
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /$1 [L]

</IfModule>

这似乎适用于像

这样的网址

mywebsite.com

mywebsite.com/component

但不适用于像

这样的子路线

mywebsite.com/component/something

那些确实会引发各种错误，例如

Uncaught SyntaxError: Unexpected token '

我注意到在服务器上打开此文件（或任何资产）实际上会加载 index.html 文件；我想是因为 .htaccess 的重写规则。

我应该如何更新我的 .htaccess 文件，以便它只将“主要”请求重定向到 index.html 而不是资产？

谢谢！

解决方法

我终于通过更改修复了它

"homepage": ".",

到

"homepage": "",

在我的package.json中。

还在这篇文章中发现了有关该问题的有趣信息：An elegant solution of deploying React app into a subdirectory，他们建议添加

<base href="%PUBLIC_URL%/">

在您的 index.html 的 <head/> 部分；但就我而言，它似乎没有这条线就可以工作。

根据记录，this gist 也很有用。

.htaccessapachemod-rewritereactjsreactjsroutes