如何在 React-Router 中优雅的使用 History 模式-JavaScript中文网-JavaScript教程资源分享门户

前言

React-Router 是 React 生态中最流行的路由库之一，它提供了基于 URL 的页面导航功能。其中，History 模式是其中一种路由模式，它可以使 URL 更加美观。

然而，使用 History 模式时，需要服务器端的支持，否则会导致页面刷新时出现 404 错误。本文将介绍如何在 React-Router 中优雅地使用 History 模式，以及如何在服务器端配置以避免出现 404 错误。

History 模式的优点

History 模式可以使 URL 更加简洁美观，去掉了 URL 中的 # 号。例如，使用 History 模式后，URL 可以从 http://example.com/#/about 变成 http://example.com/about，这让用户感觉更加自然。

此外，History 模式还可以让搜索引擎更好地索引页面，因为它们可以看到完整的 URL，而不是被 # 号截断的 URL。

使用 History 模式

使用 History 模式非常简单，只需要在创建 Router 时指定 history 参数即可。例如：

// javascriptcn.com 代码示例
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';

const history = createBrowserHistory();

function App() {
  return (
    <Router history={history}>
      {/* Your routes here */}
    </Router>
  );
}

这样，就可以启用 History 模式了。

避免 404 错误

使用 History 模式时，需要服务器端的支持。否则，当用户在浏览器中直接访问某个 URL 时，服务器会返回 404 错误，这会让用户感到非常困惑。

为了避免这种情况，需要在服务器端配置，让所有请求都返回 index.html 文件。例如，在 Express.js 中，可以这样配置：

// javascriptcn.com 代码示例
const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

这样，当用户访问任何 URL 时，服务器都会返回 index.html 文件，而 React-Router 就会根据 URL 来渲染相应的页面。

总结

使用 History 模式可以使 URL 更加美观，让用户感觉更加自然。但是，使用 History 模式时需要服务器端的支持，否则会出现 404 错误。为了避免这种情况，需要在服务器端配置，让所有请求都返回 index.html 文件。

以上是本文的全部内容，希望对您有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6575a516d2f5e1655dee832b