一、
解决方法
假设有这样一个需求，希望把下面的这个头部菜单在 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://article.itxueyuan.com/mwLo4R
