应用场景在前端开发的过程中，时常有这样的一个需求，需要将某个组件，展示在不同的页面中。
常见的有，头部菜单栏、底部版权，如下图中的菜单，就需要在不同页面中进行显示。
解决方法假设有这样一个需求，希望把下面的这个头部菜单在 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