应用场景
 
在前端开发的过程中,时常有这样的一个需求,需要将某个组件,展示在不同的页面中。常见的有,头部菜单栏、底部版权,如下图中的菜单,就需要在不同页面中进行显示。
 
 
解决方法
 
假设有这样一个需求,希望把下面的这个头部菜单在 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。
 
总结
 
在页面中引入公共组件
 
  • 麻烦,每个页面中都要引入一次
  • 切换路由,导致组件重新渲染,状态会被重置
 
在路由组件外部引入公共组件
 
  • 会在所有页面中显示,如果想要在特定页面显示,需要自行判断
  • 无法使用路由提供的相关组件和功能
 
在路由组件内部引入公共组件
 
  • 支持特定路由显示某个组件
  • 可以正常使用路由提供的相关功能
 
在以上三种方式,都无法保证组件内部的状态不被重置,如果路由前缀发生改变,哪怕把公共组件放在了,路由组件内部,状态还是会被重置,所以如果有必要,可以把状态放在全局中。
内容来源于网络如有侵权请私信删除
你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!

相关课程