React.js开发中如何将文章标题添加到URL路径中？

方案实现步骤 #

1. 调整路由规则 #

修改原有路由规则，新增slug（URL友好格式的标题）参数，该参数仅做URL展示用，不影响核心查询逻辑，加?标记为可选参数可兼容旧URL访问：

<Route path="/post/:id/:slug?" exact>
  <Post />
</Route>

2. 修改列表页跳转逻辑 #

在文章列表的标题跳转处，把文章标题处理为URL兼容格式后拼接到跳转路径中，可以自己写简单的转换函数，也可以直接用slugify等第三方工具库处理：

// 标题转slug的简易实现
const generateSlug = (title) => {
  return title
    .toLowerCase()
    .replace(/\s+/g, '-') // 空格替换为短横线
    .replace(/[^\w\u4e00-\u9fa5\-]+/g, '') // 保留中文、字母、数字、短横线
    .replace(/\-\-+/g, '-') // 合并连续短横线
    .replace(/^-+/, '').replace(/-+$/, '') // 去除首尾短横线
}

// 跳转链接写法（以react-router的Link组件为例）
<Link to={`/post/${post.id}/${generateSlug(post.post_Title)}`}>
  {post.post_Title}
</Link>

如果需要长期使用，建议在MySQL文章表中新增post_slug字段，发布文章时就将转换好的slug存入数据库，避免每次跳转时动态计算的性能损耗。

3. 原有数据请求逻辑无需改动 #

你的现有接口是通过文章ID查询数据，所以Post组件内只需要从路由参数中取id即可，slug参数可以直接忽略，完全不影响现有业务逻辑：

import { useParams } from 'react-router-dom';

// Post组件内取路由参数
const { id } = useParams();
// 原有请求代码保持不变
axios.get(`${server}/posts/byId/${id}`).then((res) => {
  setPosts(res.data);
});

可选SEO优化 #

如果要避免同一篇文章对应多个URL的问题，可以在拿到文章数据后校验当前URL的slug是否正确，不正确的话做静默重定向：

const { id, slug } = useParams();

axios.get(`${server}/posts/byId/${id}`).then((res) => {
  const postData = res.data;
  setPosts(postData);
  const correctSlug = generateSlug(postData.post_Title);
  if (slug && slug !== correctSlug) {
    window.history.replaceState(null, null, `/post/${id}/${correctSlug}`);
  }
});

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