如何将React项目接入HTML网站子路由？实现按钮跳转至/mypage

根据HTML页面和React项目的部署环境，分两种场景处理：

场景1：HTML与React项目同域部署 #

如果两者在同一个域名（或端口）下（比如HTML放在React项目的public目录一起部署），直接跳转前端路由路径即可，React的BrowserRouter会自动拦截并渲染对应页面。

写法1：用a标签（最简单） #

<!-- home.html 中的代码 -->
<a href="/mypage" target="_self">go to React page</a>

写法2：用button按钮绑定点击事件 #

<!-- home.html 中的代码 -->
<button onclick="window.location.href='/mypage'">go to React page</button>

场景2：HTML与React项目跨域部署 #

如果两者在不同域名或端口下，跳转时需要指定完整的React项目URL路径：

写法1：a标签 #

<!-- home.html 中的代码，替换为你的React项目实际域名 -->
<a href="http://your-react-domain.com/mypage" target="_self">go to React page</a>

写法2：button按钮绑定点击事件 #

<!-- home.html 中的代码，替换为你的React项目实际域名 -->
<button onclick="window.location.href='http://your-react-domain.com/mypage'">go to React page</button>

额外注意 #

如果React项目部署在域名的子路径下（比如http://example.com/react-app），跳转路径需要加上子路径前缀，例如：

<a href="/react-app/mypage" target="_self">go to React page</a>

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