將登陸頁面與反應應用程序混合（create-react-app）

Question

將 React 應用程序“集成”到現有 HTML 登錄頁面的最佳實踐是什么？

例如，我在 mypage.com/ 上有一個營銷頁面，並且只想在 mypage.com/app 上使用 react 應用程序。

我嘗試的是使用 react 路由器並使用危險的 SetInnerHTML 函數來包含 HTML 頁面，但在這種情況下，我需要使用 html-loader 並且我使用 react-scripts 而不是 webpack.config 所以我認為這是不可能的添加加載器。 不是嗎？

<Router>
  <Route path="/" exact component={Landingpage} />
  <Route path="/app" exact component={App} />
</Router>

/* Landingpage */
return () {
  <div ... dangerouslySetInnerHTML={{ __html: html }} />
}

我嘗試了以下但我沒有 webpack.config 因為我使用 react-scripts。 React：如何加載和呈現外部 html 文件？

我想要的是調用 yarn build 並接收完成的應用程序。 你對我如何達到這個目標有什么建議嗎？

非常感謝！

Answer 1

壞消息
你不能用create-react-app 的默認配置來做到這一點

好消息
可以使用彈出。

1. npm run eject
2. 添加app.html並從index.html添加指向它的鏈接
3. 在config/paths.js行appHtml: resolveApp('public/app.html')更改為

...
appHtml: resolveApp('public/app.html'),
...

4. config/webpack.config.js改為

{
  filename: 'app.html', // Add this line
  inject: true,
  template: paths.appHtml
},

5. 相應地配置react-router如果存在。