React项目/home路由正常，/about路由失效提示Cannot GET /about

你遇到的Cannot GET /about错误，是BrowserRouter的典型坑：它依赖HTML5的History API实现无刷新路由，当你直接在地址栏输入/about或者刷新这个页面时，浏览器会向服务器发送GET请求获取/about资源——但你的服务器根本没配置这个路径的响应，自然返回404。而首页能正常访问，是因为服务器默认会返回根路径的index.html，React Router在客户端接管了路由跳转。

给你三个可行方案，按需选择：

1. 快速临时方案：换成HashRouter #

这是最简单的改法，不用动服务器配置，只是URL会多一个#。把代码里的BrowserRouter替换成HashRouter即可：

import React from "react";
import ReactDOM from "react-dom";
// 替换为HashRouter
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Components/Home";
import About from "./Components/About";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

ReactDOM.render(<App />, document.getElementById("root"));

之后访问路由会变成http://your-domain/#/about，服务器只会处理根路径，路由完全由客户端React Router接管，就不会出现404了。

2. 生产环境推荐：配置服务器返回index.html #

如果想要干净的URL（不带#），需要让服务器把所有路由请求都返回index.html，让React Router在客户端处理路由。不同服务器的配置方式如下：

如果你用Create React App（CRA） #

安装serve工具（专门支持SPA路由的静态资源服务工具）：

npm install -g serve

然后在package.json里添加启动命令：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "serve": "serve -s build"
}

先运行npm run build打包项目，再用npm run serve启动服务，所有路由请求都会返回build目录下的index.html。

如果你用Express服务器 #

在你的Express代码末尾添加以下路由（要放在所有API路由之后）：

const path = require('path');
// 所有非API请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

这样不管访问/about还是其他路由，服务器都会返回React的入口文件，由React Router处理路由。

如果你用Nginx #

在Nginx的配置文件中，找到对应站点的location /块，修改为：

location / {
  try_files $uri $uri/ /index.html;
}

这个配置的逻辑是：先尝试访问请求的文件或目录，如果找不到，就返回index.html，让React Router接管路由。

3. 最后检查：组件导入是否正确 #

虽然首页能正常访问，但还是要确认About组件的导出和导入是否正确：

• 确保About.js里用的是export default About导出组件
• 确认导入路径./Components/About没有拼写错误（比如大小写、目录名是否匹配）

内容的提问来源于stack exchange，提问作者Ashwani Panwar