多页React项目中如何为URL添加ID参数并加载对应博文？

1. 先配置服务器路由重定向 #

你的核心问题是服务器会把/anotherpage/test_blog这类路径当成独立页面去查找，所以第一步必须调整服务器配置，让所有以/anotherpage/开头的请求都指向你的通用博文页面（比如anotherpage.html）：

• 用Nginx的话，在配置文件中添加：

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

• 本地开发用webpack-dev-server时，在webpack.config.js里配置：

  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/anotherpage\/.*/, to: '/anotherpage.html' }
      ]
    }
  }
  

• Apache、IIS等其他服务器也可通过URL重写规则实现相同逻辑，核心是把带博文ID的路径映射到通用页面文件。

2. React端提取ID并加载内容 #

在通用博文页面的React代码里，直接从URL提取博文ID，再加载对应内容：

import { useEffect, useState } from 'react';

function BlogPage() {
  const [blogContent, setBlogContent] = useState(null);
  // 从URL路径末尾提取博文ID
  const blogId = window.location.pathname.split('/').pop();

  useEffect(() => {
    // 调用接口加载对应ID的博文数据
    fetch(`/api/blogs/${blogId}`)
      .then(res => res.json())
      .then(data => {
        setBlogContent(data);
        // 加载数据后动态设置页面元数据
        document.title = data.title;
        document.querySelector('meta[name="description"]').setAttribute('content', data.description);
        // OG标签、Twitter卡片等其他元数据可同理修改
      });
  }, [blogId]);

  if (!blogContent) return <div>加载中...</div>;

  return (
    <div>
      <h1>{blogContent.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: blogContent.content }} />
    </div>
  );
}

export default BlogPage;

3. 元数据的SEO补充说明 #

客户端动态修改meta标签的方式，部分搜索引擎爬虫可能无法识别（因为爬虫不执行JS）。如果需要更好的SEO支持，可以选择：

• 服务器端渲染（SSR）：服务器收到请求后，先根据博文ID获取内容，渲染出带有正确元数据的HTML再返回给客户端。
• 静态生成（SSG）：构建阶段提前为所有博文生成静态HTML页面，每个页面自带独立元数据，适合博文数量固定或更新不频繁的场景。

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