React Router Dom v6访问/btn路由报Cannot GET错误如何解决

两个独立问题共同导致报错：

• 路由写法不符合React Router v6 规范
  代码中使用的Routes组件是React Router v6的专属API，该版本要求所有路由匹配后渲染的组件必须传入Route的element属性，不支持将组件直接作为Route的子节点渲染。示例里/btn路由把SimpleBtn2放在了Route标签的子节点位置，路由匹配后无法正确渲染组件。另外v6版本路由默认是精确匹配，手动加的exact属性是无效的冗余配置。如果之前混用v5版本的Switch组件和v6版本API，版本不兼容也会直接导致路由规则失效。
• 服务器未配置单页应用路由回退规则
  出现Cannot GET /btn报错的直接原因是：React是单页应用，整个项目只有index.html一个入口文件，所有路由跳转都是前端加载JS后在客户端控制的。当直接访问/btn路径、或者刷新子路由页面时，服务器会默认查找路径对应的物理静态文件，找不到对应文件就会返回404类错误。首页/能正常访问是因为该路径刚好映射到根目录的index.html文件。

1. 修正路由配置写法，调整后代码如下：

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  toggleBtn = () => {
    console.log("Hello World!");
  };

  render() {
    return (
      <Router>
        <Suspense fallback={<div>...Loading</div>}>
          <Routes>
            <Route
              path="/"
              element={<SimpleBtn toggleBtn={this.toggleBtn} />}
            />
            <Route 
              path="/btn"
              element={<SimpleBtn2 toggleBtn={this.toggleBtn} />}
            />
          </Routes>
        </Suspense>
      </Router>
    );
  }
}

2. 给开发/部署服务器配置路由回退规则，所有路径请求都返回index.html文件，常见场景配置方式：
   • 本地开发用Vite：在vite.config.js中添加配置项server: { historyApiFallback: true }
   • 本地开发用Webpack devServer：在devServer配置中添加historyApiFallback: true
   • 基于Create React App创建的项目：本地开发默认已配置该规则，打包部署时需要给托管平台（Nginx、Vercel、Netlify、对象存储静态托管等）添加重写规则，将所有请求路径重写到index.html

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