React项目部署Netlify后刷新动态路由或直接访问链接报404求助

你遇到的是单页应用部署在静态托管平台的典型问题，本质是服务端没有对应动态路径的静态资源，直接返回404，没有把路由控制权交给前端处理，按以下步骤修改即可解决：

方案1：继续使用BrowserRouter（推荐，路径无#号，体验更好） #

只需要添加Netlify重定向规则即可：

• 在项目的public目录（和index.html同层级）新建一个名为_redirects的文件，注意不要加任何后缀名
• 在文件内写入如下内容：

/*  /index.html  200

这个规则会让Netlify把所有路径的请求都重定向到index.html，由前端React Router接管路由逻辑，刷新、直接访问分享链接都不会再报404。

方案2：正确使用HashRouter #

你之前使用HashRouter依旧报错大概率是替换不完整，正确修改方式如下：

1. 修改index.js文件的导入和使用：

// 把原来的BrowserRouter导入替换为HashRouter
import { HashRouter } from 'react-router-dom';
// 渲染部分的标签也对应替换
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <HashRouter> {/* 这里替换成HashRouter */}
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate>
      </HashRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

2. 重新部署即可，该方案不需要额外配置Netlify，路径会自动带#前缀，比如www.sg.com/#/movie/43434，也能解决刷新404问题。

可选优化（非必须，提升代码健壮性） #

你当前App.js中手动切割路径拿id的写法容错率低，可改用React Router内置的useParams钩子拿动态参数：

• 删掉App.js中const pathId = location.pathname.split('/')[2];这行代码，给MovieDetail传参的对应pathId={pathId}也删掉
• 在MovieDetail组件内导入useParams拿id：

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

// 在组件内部使用
const MovieDetail = () => {
  const { id } = useParams();
  // 后续用id做逻辑即可
}

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