如何在多個頁面中，引入一個公共組件

應用場景

 

在前端開發的過程當中，時常有這樣的一個需求，須要將某個組件，展現在不一樣的頁面中。常見的有，頭部菜單欄、底部版權，以下圖中的菜單，就須要在不一樣頁面中進行顯示。

 

 

解決方法

 

假設有這樣一個需求，但願把下面的這個頭部菜單在 Home 和 About 這兩個頁面中顯示

 

 

在頁面中，引入公共組件

 

在須要顯示頭部組件的頁面中，引入頭部組件，以下所示。

 

 

這樣確實能解決問題，但比較麻煩，須要在每一個使用的頁面中，都引入一次。

 

另一個問題是，在 Header 組件內部的狀態，切換路由後，狀態會被重置，以下所示。

 

 

代碼以下

 

 

若是但願狀態不被重置，可使用 redux 或 mobx，將狀態保存到全局。

 

在路由組件外面，引入公共組件

 

 

這樣，在全部頁面中都會顯示 Header 組件。

 

不過，因爲 Header 組件是在路由組件外面引入的，致使沒法在 Header 組件中，使用路由相關的功能，好比 Link 組件。若是隻是進行路由頁面跳轉，那還好辦，可使用 a 標籤代替 Link 組件，以下圖所示。

 

 

在路由組件外面引入 Header 組件的另一個問題是， Header 組件會在全部頁面中展現，而有時，咱們只是但願可以在特定頁面中進行顯示。

 

在路由組件中，引入公共組件

 

 

在 HashRouter 組件中引入 Header 組件，Header 組件能夠正常使用路由的相關功能。

 

不過，Header 組件仍是會在全部頁面中進行顯示，若是隻但願它在特定頁面中進行顯示，那麼，咱們須要將公共組件放在 Route 中，並修改匹配路徑，以下所示。

 

 

將公共組件放在 Route 組件中，並定義匹配路徑，接着修改 Switch 組件中相應的路由匹配規則，如想在 Home 和 About 頁面中顯示 Header 組件，那麼就在路徑匹配中添加 /app，這樣就能夠實現，在特定頁面中顯示某個組件。

 

因爲添加了 /app 路徑前綴後，致使 URL 輸入 / 不會顯示 Home 頁，想解決這個問題，可使用重定向 Redirect 組件，以下所示。

 

 

還有一種不太推薦的方式，也能夠實如今特定頁面顯示某個組件，Route 組件不寫 path，而後在相應的組件中，判斷當前頁面的 hash 是否與目標吻合，若是匹配，則顯示組件，不然返回 null。

 

總結

 

在頁面中引入公共組件

 

• 麻煩，每一個頁面中都要引入一次
  

• 切換路由，致使組件從新渲染，狀態會被重置
  

 

在路由組件外部引入公共組件

 

• 會在全部頁面中顯示，若是想要在特定頁面顯示，須要自行判斷
• 沒法使用路由提供的相關組件和功能

 

在路由組件內部引入公共組件

 

• 支持特定路由顯示某個組件
• 能夠正常使用路由提供的相關功能

 

在以上三種方式，都沒法保證組件內部的狀態不被重置，若是路由前綴發生改變，哪怕把公共組件放在了，路由組件內部，狀態仍是會被重置，因此若是有必要，能夠把狀態放在全局中。