Express与React Router共存时的路由优先级问题及解决方案咨询

项目背景 #

项目目录结构：

├── server
│   └── server.js
├── react_client
│   ├── index.js
│   └── App.js

核心依赖版本：

……
    "react": "^18.2.0",
    "react-router-dom": "^6.8.0",
……
    "express": "^4.18.2",
……

路由配置 #

后端Express路由（server.js） #

app = express()

app.get("/api/login", loginFunction)

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../react_client/build', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`Listening on ${PORT}`)
})

前端React Router路由（App.js） #

<Route path={'/'} element={}/>

<Route path={'/dashboard'} element={}/>

<Route path="*" element={
    <Notfound/>
}/>

问题现象 #

点击以下组件中的Link标签，会跳转到App.js定义的Notfound页面；但刷新该页面时，会正常显示server.js中loginFunction返回的内容（符合预期）：

import { Link } from 'react-router-dom';
const Home=()=>{
  return <Link to='/api/login'>
          login button</Link>
}

尝试过添加刷新逻辑临时解决，但方案繁琐且需要等待：

import { Link } from 'react-router-dom';
const Home=()=>{
  const refreshPage = () => {
    setTimeout(() => {
        window.location.reload(false);
      }, 300)
  }

  return <Link to='/api/login' onClick={refreshPage}>
          login button</Link>
}

疑问 #

为什么点击Link标签时Express路由失效，会显示Notfound页面？这是否和Link标签有关？有没有更优雅的解决方案？

原因分析 #

1. Link标签的本质：React Router的Link是前端路由跳转，只会修改浏览器地址栏的URL，不会发起新的HTTP请求。此时URL变化后，React Router会在前端匹配路由规则，因为你的前端路由里没有/api/login的匹配项，直接命中了path="*"的Notfound路由。
2. 刷新页面的流程：刷新时浏览器会向服务器发起完整的HTTP请求，此时Express会先匹配/api/login路由（优先级高于*路由），返回对应内容；只有当没有匹配到任何后端路由时，才会走*路由返回React的index.html，交给前端路由接管。

优雅解决方案 #

方案1：用原生a标签替代Link

因为/api/login是后端API路由，不是前端路由，直接用原生<a>标签即可，点击时会触发HTTP请求，直接走Express路由：

const Home=()=>{
  return <a href='/api/login'>login button</a>
}

方案2：前端路由排除API前缀（不推荐，仅作补充）

如果一定要保留Link（无必要场景），可以在React Router中让*路由不匹配/api/*路径：

// App.js修改路由配置
import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='/' element={/* 首页组件 */} />
      <Route path='/dashboard' element={/* 仪表盘组件 */} />
      {/* 仅对非/api开头的路径显示Notfound */}
      <Route path='*' element={
        window.location.pathname.startsWith('/api/') ? 
          <Navigate to={window.location.pathname} replace /> : 
          <Notfound />
      } />
    </Routes>
  );
}

总结 #

核心问题是混淆了前端路由跳转（无HTTP请求）和HTTP请求跳转（刷新/原生a标签）的区别。对于后端API路径，直接使用原生a标签是最简洁优雅的解决方案，完全不需要前端路由介入。

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