react 動態載入 function component

在做大型專案的時候,要切換的頁面往往會到幾十頁,這時候一般的導入頁面的寫法可能會讓你瘋掉。

我們一般是這樣引入頁面的:

import Home from '@/views/Home';

但是頁面一多,就算你獨立出一個 router.js 檔案,裡面還是要把所有會用到的頁面都引入啊QQ

所以我們就要用動態路由的方式載入頁面(component)。


假設你有一個頁面 (function component):

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};
export default Home;

然後有一個陣列:

const routes = [{ name: "Home" }, { name: "About" }];

建立一個載入 component 的 function:

這邊關鍵就是你要多一個.default(),找了好久一直出錯,原來是這個問題XD

const getComponent = name => {
    let cpn = require(`@/views/${name}`);
    return cpn.default();
};

在頁面中呼叫:

<div>
  { routes.map(i =>  (
      <div key={i.name}>
        { getComponent(i.name) }
      </div>
  )}
</div>

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。