React搭配Express时如何获取自定义URL的postName参数查询博客数据

现有实现存在的问题 #

• 跨域端口不匹配：Express服务运行在8080端口，React开发服务默认运行在3000端口，直接请求/posts/会默认发往3000端口，无法命中后端接口
• 缺少前端路由配置：没有配置客户端路由的情况下，直接访问localhost:3000/posts/day1会被React判定为404页面，无法提取路径中的postName参数
• 接口请求逻辑错误：fetch路径没有拼接postName参数，且后端返回字段为postName，前端取data.users无法拿到有效数据

具体修改步骤 #

1. 配置React前端路由 #

首先安装路由依赖：
npm install react-router-dom

修改项目入口文件（一般为main.jsx），配置路由规则：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Routes>
      <Route path="/posts/:postName" element={<App />} />
      <Route path="/" element={<App />} />
    </Routes>
  </BrowserRouter>
)

2. 修改App.jsx逻辑，提取参数发起请求 #

import React from "react";
import { useParams } from "react-router-dom";

function App() {
    const [data, setData] = React.useState(null);
    // 提取路径中的postName参数
    const { postName } = useParams();

    React.useEffect(() => {
      // 存在postName参数时才发起对应请求
      if (postName) {
        // 路径拼接postName参数，这里开发环境可以直接写全接口地址，或者配置代理后省略域名
        fetch(`http://localhost:8080/posts/${postName}`)
          .then((res) => res.json())
          .then((data) => setData(data));
      }
    }, [postName]); // 依赖项添加postName，参数变化时自动重新请求
  
    return (
      <div className="App">
        <header className="App-header">
          <p>{!data ? "Loading..." : `当前文章名称：${data.postName}`}</p>
        </header>
      </div>
    );
}

export default App;

3. 解决跨域问题（二选一即可） #

方案A：Express端配置CORS

安装cors依赖：
npm install cors
在app.js中添加配置：

const cors = require('cors');
app.use(cors());

方案B：React端配置代理

在React项目的package.json文件中添加一行配置：
"proxy": "http://localhost:8080"
配置完成后，fetch请求可以直接写/posts/${postName}，无需加域名前缀。

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