使用react-router-dom部署后刷新报Not found，本地正常如何解决？

这不是react-router-dom的使用问题，而是单页应用（SPA）的前端路由特性导致的：

• 本地开发时，webpack-dev-server会自动把所有路由请求转发到index.html，所以刷新页面不会有问题。
• 部署到Render这类静态服务器后，刷新页面时浏览器会直接向服务器请求对应路径（比如/posts/123），但服务器上并没有这个路径对应的文件，因此返回「Not found」错误。

针对Render平台，推荐以下两种解决方式：

方案1：配置静态站点重定向规则 #

1. 在项目根目录的public文件夹下创建_redirects文件（Create React App项目直接放在public目录即可）
2. 在文件中写入以下规则：

/*    /index.html   200

该规则会让Render服务器将所有路由请求都转发到index.html，交由React Router处理前端路由逻辑。

方案2：改用HashRouter #

如果不想配置服务器规则，可以将BrowserRouter替换为HashRouter，路由会自动带上#前缀（比如/#/posts/123），这种方式下所有请求都会指向根路径的index.html，不会触发服务器的404错误。
修改路由包裹代码：

import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate to="/posts" />} />
        <Route path="/posts" element={<Home />} />
        <Route path="/posts/search" element={<Home />} />
        <Route path="/posts/:id" element={<PostDetails />} />
        <Route path="/auth" element={<Auth />} />
      </Routes>
    </Router>
  );
}

注：React Router v6中Route默认就是精准匹配，所以你原来配置里的exact属性可以省略，不影响功能。

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