微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决reactJS 路由,错误 500 和 .htaccess:重写规则不适用于子路由

我基于 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 也很有用。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。