ReactJS点击按钮跳转纯HTML页面：加载时出现GET错误

你遇到的问题其实有两个核心原因：一是按钮点击事件的写法错误，导致组件一加载就触发了跳转；二是HTML文件的放置位置不符合React项目的静态资源规则，导致开发服务器找不到文件。下面是具体的解决步骤：

1. 修正按钮的点击事件写法 #

你当前的代码在组件渲染时就直接执行了window.location.href="Scanner.html"，这就是为什么一加载dashboard页面就弹出错误的原因。正确的做法是把跳转逻辑封装成一个函数，只有点击按钮时才执行：

<Button color="primary" size="lg" onClick={() => window.location.href="/Scanner.html"}>
  Scan Asset
</Button>

2. 调整HTML文件的存放位置 #

React项目中，直接通过URL访问的静态文件（比如HTML、图片、音频等）必须放在项目根目录的public文件夹下，而不是和src里的组件文件同级。因为src目录下的文件会被Webpack编译处理，而public目录下的文件会被开发服务器直接托管，可以通过根路径直接访问。

• 把你的Scanner.html文件移动到public文件夹中
• 确保文件路径正确后，点击按钮就能正常跳转到这个HTML页面了

举个项目结构的例子，调整后应该是这样的：

your-react-project/
├── public/
│   ├── index.html
│   └── Scanner.html  // 移到这里
└── src/
    └── components/
        └── dashboard.js

这样修改后，点击按钮就能正确加载Scanner.html页面了。

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