React动态路由开发正常，构建部署后访问博客文章报404错误

1. 修正路由跳转的Link写法 #

你的路由配置是blog/:id，意味着匹配的路径是/blog/xxx（xxx为id值），但当前Link生成的是/blog/id=xxx，既不符合路由规则，加上reloadDocument={true}还会强制刷新页面，触发服务器对这个不存在路径的请求，直接导致404。

修改Link代码：

<Link to={`/blog/${blog.id}`}>

2. 正确获取路由参数 #

不要用document.location.pathname.split("=")这种原生方式，react-router-dom提供了专门的钩子来获取参数，在BlogArticle组件中：

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

function BlogArticle() {
  const { id } = useParams(); // 直接拿到路由匹配的id参数
  // 后续业务逻辑中直接使用id即可
  return <div>文章ID：{id}</div>;
}

3. 配置服务器解决部署后的404 #

单页应用（SPA）的路由由前端管理，服务器上只有index.html这一个入口文件。当用户直接访问/blog/123这类路径时，服务器会尝试寻找对应的物理文件，找不到就返回404。需要配置服务器让所有路由请求都 fallback 到index.html：

• Nginx：修改配置文件，在location块中添加

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

• Apache：在项目根目录创建.htaccess文件，写入

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• Vercel/Netlify 等平台：在项目根目录创建_redirects文件，写入

  /* /index.html 200
  

完成以上三步后，重新构建部署项目即可正常访问博客文章页面。

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