為React路由渲染靜態資料夾

Question

我的資料夾中有一些遺留靜態程式碼（HTML、CSS、jQuery、JS 等）。現在，我需要在我的反應應用程式中的特定路線上呈現這些內容。由於某些政策原因，我無法使用 iFrame。我不想在 React 中重寫它，原因有兩個：

• 這是一個包含遺留程式碼的單頁。不值得付出努力
• 這個靜態資料夾也用在其他地方

所以，如果我用 React 重寫它，那麼我最終會得到兩個版本：一個是頁面的 React 版本，另一個是頁面的非 React 版本。如果我想要改變，那麼我需要更新兩次。

我有什麼選擇？在我的 React 應用程式的資料夾內渲染靜態檔案而不使用 iFrame 的最簡單且不那麼混亂的方法是什麼？

Answer 1

您可以在 public 目錄中新增靜態文件，並使用資料夾複製所需的路徑，然後靜態提供這些文件。如果路由是 /display，您可以新增一個名為 display 的資料夾。假設您的檔案名稱為 contact.html，那麼您的檔案將位於 /display/contact.html 下。

透過react連結到檔案

// ...
return (
  <a 
    href="/display/contact.html" 
    // if you want to open it in a new tab
    target="_blank" 
  />
);