React Router手动输入路由报Cannot GET，为何仅Link组件可用？

原因分析 #

React Router是前端路由，通过Link跳转时仅在客户端切换组件，不会向服务器发送请求。但手动输入URL或刷新页面时，浏览器会直接向服务器请求该路径，而你的服务器（开发阶段的Webpack Dev Server或生产环境的静态服务器）未配置将所有路由请求指向React入口HTML文件，导致返回404错误。

针对Jekyll+Webpack+React项目的解决方案 #

1. 开发环境（Webpack Dev Server）配置 #

修改Webpack配置文件（通常为webpack.config.js），添加historyApiFallback配置，让Dev Server将所有路由请求转发到入口HTML文件：

module.exports = {
  // ...其他配置项
  devServer: {
    historyApiFallback: true,
    // 若入口HTML不在根目录，需指定重写规则：
    // historyApiFallback: {
    //   rewrites: [
    //     { from: /./, to: '/your/path/index.html' }
    //   ]
    // }
  }
};

重启Webpack Dev Server后，手动输入URL即可正常加载。

2. 生产环境（Jekyll部署）配置 #

Jekyll默认会为每个页面生成对应HTML文件，但React前端路由需要所有请求指向React入口页面（如index.html），可通过两种方式配置：

方法一：利用Jekyll的404页面

• 在_config.yml中设置permalink: pretty，保证URL为干净的路径形式
• 创建404.html文件，内容与React入口页面完全一致。当服务器找不到对应路径时，会返回404页面，此时React Router会接管路由并渲染对应组件。

方法二：配置部署服务器

如果用Nginx部署，修改Nginx配置文件添加重写规则：

server {
  // ...其他配置
  location / {
    try_files $uri $uri/ /index.html;
  }
}

如果用Apache部署，在项目根目录创建.htaccess文件：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

以上配置会将所有非静态资源的请求转发到index.html，让React Router正常处理路由。

3. 确认React Router配置正确 #

确保新版react-router-dom使用BrowserRouter（而非HashRouter），示例配置：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new_page" element={<NewPage />} />
      </Routes>
    </Router>
  );
}

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