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

大家好，欢迎来到IT知识分享网。

应用场景

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

解决方法

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

总结

在页面中引入公共组件

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

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

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

• 会在所有页面中显示，如果想要在特定页面显示，需要自行判断
• 无法使用路由提供的相关组件和功能

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

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

在以上三种方式，都无法保证组件内部的状态不被重置，如果路由前缀发生改变，哪怕把公共组件放在了，路由组件内部，状态还是会被重置，所以如果有必要，可以把状态放在全局中。

作者：追梦子
原文：https://www.cnblogs.com/pssp/p/10742385.html