从 S3 和 CloudFront 上的 URL React 应用中删除 index.html
remove index.html from URL react app on S3 and CloudFront
我在一个连接到 CloudFront 发行版的 s3 存储桶上托管多个 React 应用程序。
React 应用程序放置在文件夹中，例如，计算应用程序位于 S3 存储桶中的 /calculate 中。
我修复了发生的问题，因为 React 没有以相对于 index.html 的方式使用路径（我将“主页”：“./”添加到 package.json）。但是我正在努力为最终用户从 URL 中删除 index.html。
基本上我希望 index.html 在 https://{domain}/calculate/ 而不是 https://{domain}/calculate/index.html 上出现。有人知道如何解决这个问题吗？
谢谢
您可以在根目录中创建一个名为“.htaccess”的文件，并在其中添加以下内容：
RewriteEngine on
# Remove .html (or htm) from visible URL (permanent redirect)
RewriteCond %{REQUEST_URI} ^/(.+)\.html?$ [nocase]
RewriteRule ^ /%1 [L,R=301]
# Quietly point back to the HTML file (temporary/undefined redirect):
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^ %{REQUEST_URI}.html [END]
我在一个连接到 CloudFront 发行版的 s3 存储桶上托管多个 React 应用程序。 React 应用程序放置在文件夹中，例如，计算应用程序位于 S3 存储桶中的 /calculate 中。 我修复了发生的问题，因为 React 没有以相对于 index.html 的方式使用路径（我将“主页”：“./”添加到 package.json）。但是我正在努力为最终用户从 URL 中删除 index.html。 基本上我希望 index.html 在 https://{domain}/calculate/ 而不是 https://{domain}/calculate/index.html 上出现。有人知道如何解决这个问题吗？
谢谢
您可以在根目录中创建一个名为“.htaccess”的文件，并在其中添加以下内容：
RewriteEngine on
# Remove .html (or htm) from visible URL (permanent redirect)
RewriteCond %{REQUEST_URI} ^/(.+)\.html?$ [nocase]
RewriteRule ^ /%1 [L,R=301]
# Quietly point back to the HTML file (temporary/undefined redirect):
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^ %{REQUEST_URI}.html [END]