react 如何動態載入 function component ？

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

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

import Home from '@/views/Home';

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

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

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

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

然後有一個陣列：

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

建立一個載入 component 的 function：

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

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

在頁面中呼叫：

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