如何将React项目用于html网站的整个子路由

Answer 1

该按钮应实现对

"/mypage"

URL 的导航操作，该 URL 最好为您的 React 应用程序提供服务。

home.html

更新按钮以包含重定向到子路线的点击处理程序

<button onclick="navigateToReactApp()">go to React page</button>

const navigateToReactApp = () => {
  window.location.href = "/mypage"; // check the path correctness
};

或者使用锚标记，这在语义上可能更正确。

<a href="/mypage">go to React page</a>

App.js

通过设置 "/mypage"

属性，更新路由器以使所有路由/链接/等从托管/服务应用程序的 basenamerelative 工作。

<BrowserRouter basename="/mypage">
  <Routes>
    <Route path="/" element={<Mypage />}>
  </Routes>
</BrowserRouter>