javascript - 从使用 React 和 Webpack 构建的网站的 url 中删除 .html 扩展名

Question

我正在努力做到这一点，而不是我的浏览器显示' https://mydomainname.com/index.html '我的浏览器将只显示'https://mydomainname.com/index '.我的网站有 4 个网页，它们是使用 React 编写的，Webpack 将所有内容捆绑在一起，因此我有 4 个 .html 文件(索引、联系人...)和 4 个具有相同前缀的 .js 文件(索引、联系人、... )

我没有使用 React 路由器。我真的不知道它是什么，但是很多其他答案都提到了它。当我使用 React 时，这是唯一的方法吗？

This answer only mentions react router for non browser environments并且不给出浏览器环境的答案。

我见过的另一种解决方案是

link.split('.html')[0];
window.history.replaceState( null, null, link );

但对我来说，当我访问“mydomainname.com/About.html”等任何链接时，我会收到以下信息

Cannot GET /About

使用 .htaccess 的解决方案无效。也许是因为我在本地主机上运行它？我还听说它不推荐用于 React。

这是我的 .htacess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)\.html$ /$1 [L,R=301] 

Answer 1

我不知道我的建议是否值得回答，但这是您可以做的简单事情:

将每个页面放在以页面命名的单独文件夹中，并将 html 文件重命名为 index.html。例如。 about.html -> about/index.html。这将欺骗您的网络服务器，因此当用户输入 https://mydomainname.com/about 时服务器将寻找 about 文件夹并自动从该文件夹中选择 index.html 文件。

首页命名为index.html，放在根目录下，无需指定路径，可通过域名访问。

考虑到您有默认配置，此解决方案不需要任何 apache/nginx 配置。

一旦你学会了 react-router 你就不应该再有这样的问题了，所以把这个解决方案看作是一个 hacky 的解决方案。

编码愉快!

附言看看 Gatsby - React 静态站点生成器。它非常简单明了，并且做的事情与您当前的设置完全相同——将 React 生成为 html 文件。