Question

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

This answer only mentions it for not browser environments，但没有为浏览器环境提供答案。

使用的解决方案

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

返回

Cannot GET /About

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

这是我的.htacess

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

编码愉快！

P.S。看看Gatsby-React静态网站生成器。这非常容易和直接，并且与您当前的设置完全相同-将React生成为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'),
);

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

几个月前，我做了project，希望您能找到有用的东西

使用React和Webpack删除.html扩展名

3 个答案: