单页应用中React App与Express Server的路由配置及动态跳转问题

一、Express.js配置React SPA路由 #

React单页应用依赖客户端路由，所以Express需要同时处理API接口请求和SPA入口文件的兜底返回，具体步骤如下：

1. 先定义API路由 #

确保API路由放在静态资源托管之前，避免被静态文件中间件拦截：

const express = require('express');
const path = require('path');
const app = express();

// 示例API路由：获取用户信息
app.get('/api/user', (req, res) => {
  res.json({ id: 1, name: 'John Doe', email: 'john@example.com' });
});

// 更多API路由可以在这里添加
app.post('/api/submit', (req, res) => {
  // 处理表单提交逻辑
  res.status(200).json({ success: true });
});

2. 托管React构建产物 #

将React npm run build生成的build目录作为静态资源托管：

// 托管React静态文件
app.use(express.static(path.join(__dirname, 'client/build')));

3. 兜底返回SPA入口文件 #

所有非API的GET请求，都返回React的index.html，让客户端路由（如react-router-dom）接管页面渲染：

// 所有未匹配到API或静态文件的请求，返回React入口
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'client/build', 'index.html'));
});

// 启动服务器
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

关键说明：当用户直接在浏览器输入React客户端路由（如/about）时，Express会返回index.html，由React路由库解析路径并渲染对应组件，避免出现404。

二、React应用内实现向Express服务器的动态跳转 #

根据需求不同，分为两种场景：

1. 异步调用Express API（无页面刷新） #

如果只是需要从Express获取数据，用fetch或axios发起异步请求即可，无需页面跳转：

import { useState, useEffect } from 'react';

function UserProfile() {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 调用Express API
    fetch('/api/user')
      .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then(data => {
        setUserData(data);
        setLoading(false);
      })
      .catch(err => {
        console.error('获取用户数据失败:', err);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (!userData) return <div>加载失败</div>;

  return (
    <div>
      <h2>用户信息</h2>
      <p>姓名: {userData.name}</p>
      <p>邮箱: {userData.email}</p>
    </div>
  );
}

export default UserProfile;

2. 跳转到Express处理的非SPA路由（页面刷新） #

如果Express有服务器端处理的路由（如文件下载、SSR页面等），不能用React的Link组件（会被客户端路由拦截），需要用原生方式触发服务器请求：

方式一：使用原生<a>标签

// 点击后直接向Express发送GET请求，由服务器处理路由
<a href="/download/report">下载月度报告</a>

方式二：通过window.location跳转

适用于需要在事件中触发跳转的场景：

function handleDownload() {
  // 触发服务器路由，页面会刷新并执行Express的路由逻辑
  window.location.href = '/download/report';
}

// 在组件中使用
<button onClick={handleDownload}>下载报告</button>

开发阶段注意事项 #

• 如果React运行在3000端口，Express在5000端口，可在React的package.json中添加"proxy": "http://localhost:5000"，解决跨域问题，开发时API请求会自动转发到Express。
• 部署时确保React的build目录路径正确，避免静态资源加载失败。

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