解决 React SPA 中使用 react-router 和 browserHistory 刷新页面 404 的问题

问题描述

在使用 React 开发单页应用（SPA）时，通常会使用 react-router 来管理路由，而 browserHistory 则是 react-router 中的一个路由模式，它使用 HTML5 History API 来实现前端路由。但是，当我们在 SPA 中使用 browserHistory 时，如果直接刷新页面，会导致页面出现 404 错误，这是因为后端服务器并没有对这些路由进行处理。

解决方案

1. 配置后端服务器

首先，我们需要在后端服务器中配置路由转发，将所有的路由都转发到入口文件中，这样就可以保证在刷新页面时，后端服务器能够正确地响应请求。

以 Node.js 服务器为例，我们可以使用 express 框架来实现路由转发。在 app.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);

这里的 build 目录是我们打包后生成的文件夹，将所有的静态资源都放在这个文件夹中。app.use(express.static(path.join(__dirname, 'build'))) 表示将 build 文件夹下的静态资源作为根目录，然后在 app.get('/*', ...) 中，将所有的路由都转发到 index.html 文件中。

2. 使用 HashRouter

除了配置后端服务器之外，我们还可以使用 HashRouter 来解决这个问题。HashRouter 是 react-router 中的另一种路由模式，它使用 URL 中的 hash（即 #）来实现前端路由，这种路由模式不会影响后端服务器的路由处理。

我们只需要将 browserHistory 替换为 HashRouter 即可：

// javascriptcn.com 代码示例
import { HashRouter, Route, Switch } from 'react-router-dom';

<HashRouter>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </Switch>
</HashRouter>

这样，在刷新页面时，就不会出现 404 错误了。

总结

在使用 React SPA 中，如果我们想要使用 browserHistory 来管理路由，就需要在后端服务器中进行路由转发的配置，或者使用 HashRouter 来替代。这个问题困扰了很多前端开发者，解决了这个问题，我们的应用就可以更加完善和稳定了。

示例代码

// javascriptcn.com 代码示例
// src/App.js

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </HashRouter>
  );
}

export default App;

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