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

Question

我试图让这个不是我的浏览器中显示“ https://mydomainname.com/index.html ”我的浏览器将只显示“ https://mydomainname.com/index ”。我的网站是4个网页，使用React和Webpack编写，将所有内容捆绑在一起，这样我就有4个.html文件（索引，联系人...）和4个.js文件具有相同的前缀（索引，联系人，...）。 ）

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

此答案仅提及针对非浏览器环境的react router，而未针对浏览器环境给出答案。

我见过的另一种解决方案使用

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。这将欺骗您的Web服务器，因此当用户键入https://mydomainname.com/时，服务器将在其中寻找about文件夹并自动index.html从该文件夹中选择文件。

主页的命名应index.html与在根目录中的命名相同，并且可以通过域名访问，而无需指定任何路径。

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

一旦您学习了react-router，您就不会再遇到这样的问题了，因此请将此解决方案视为一个棘手的解决方案。

编码愉快！

PS看看Gatsby-React静态站点生成器。这非常容易和直接，并且与您当前的设置完全相同-将React生成为html文件。

Answer 2

问题是您无法使用客户端工具来执行此操作。您只能使用客户端javascript（反应，香草js等）更改浏览器显示栏中的URL，但这不会将您重定向到特定页面。您可以在此处了解更多信息。

为了实现所需的功能，您必须处理服务器端代码。因此，您应该有权访问服务器本身。例如，它将如下所示：

1. 客户端要求服务器获取此URL：https : //mydomainname.com/index
2. Server知道应该寻找扩展名为.html的文件“ index”，并且会寻找它。
3. 如果找到正确的文件，它将返回适当的index.html文件。（显示栏中的网址不会更改）。

Answer 3

React Router非常易于使用，这是一个示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch, withRouter } from 'react-router-dom';
import { createHashHistory } from 'history';

import Home from './components/home';
import Contact from './components/contact';
import Login from './components/login';

const history = createHashHistory();

const Root = () => {
  const { location } = history;
  return (
    <Router history={history}>
      <Switch location={location}>
        <Route path="/login" exact component={Login} />
        <Route path="/contact" exact component={Contact} />
        <Route path="*" exact component={Home} />
      </Switch>
    </Router>
  )
};

ReactDOM.render(
  Root(),
  document.getElementById('Root'),
);

您只需要将完成的页面作为组件导入，这样您便有了更大的灵活性，现在您可以有条件地渲染或应用过渡效果。

我几个月前做了一个小项目，希望您能找到有用的东西