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

Question

我基于create-react-app构建了一个反应应用程序。

在 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 . / [L]

</IfModule>

这似乎适用于像

这样的网址

mywebsite.com

mywebsite.com/component

但不适用于像

这样的子路线

mywebsite.com/component/something

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

Uncaught SyntaxError: Unexpected token '<' - main.8f4fdfb2.chunk.js:1

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

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

谢谢！

Answer 1

我终于通过更改

修复了它

"homepage": ".",

至

"homepage": "",

在我的package.json.

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

<base href="%PUBLIC_URL%/">

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

郑重声明，this gist 也很有用。

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

reactJS routing, errors 500 & .htaccess: rewrite rules not working on sub-routes

apache

.htaccess

mod-rewrite

routes

reactjs