如何在多个页面中，引入一个公共组件

应用场景

 

在前端开发的过程当中，时常有这样的一个需求，须要将某个组件，展现在不一样的页面中。常见的有，头部菜单栏、底部版权，以下图中的菜单，就须要在不一样页面中进行显示。

 

 

解决方法

 

假设有这样一个需求，但愿把下面的这个头部菜单在 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。

 

总结

 

在页面中引入公共组件

 

• 麻烦，每一个页面中都要引入一次
  

• 切换路由，致使组件从新渲染，状态会被重置
  

 

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

 

• 会在全部页面中显示，若是想要在特定页面显示，须要自行判断
• 没法使用路由提供的相关组件和功能

 

在路由组件内部引入公共组件

 

• 支持特定路由显示某个组件
• 能够正常使用路由提供的相关功能

 

在以上三种方式，都没法保证组件内部的状态不被重置，若是路由前缀发生改变，哪怕把公共组件放在了，路由组件内部，状态仍是会被重置，因此若是有必要，能够把状态放在全局中。