路由到另外一个页面_如何在多个页面中，引入一个公共组件

应用场景

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

解决方法

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

路由到另外一个页面_如何在多个页面中，引入一个公共组件相关推荐

【水汐のC#】计一个Windows应用程序，在该程序中定义一个学生类和班级类，以处理学生的学号，姓名，语文，数学和英语3门课程的期末考试成绩。实现如下要求的功能：
设计一个Windows应用程序,在该程序中定义一个学生类和班级类,以处理学生的学号,姓名,语文,数学和英语3门课程的期末考试成绩.实现如下要求的功能: 根据姓名查询该学生的总成绩: 统计全班学生总分的 ...
以小组为单位，设计一个Windows应用程序，在该程序中定义一个学生类和班级类，以处理学生的学号，姓名，语文，数学和英语3门课程的期末考试成绩。
设计一个Windows应用程序,在该程序中定义一个学生类和班级类,以处理学生的学号,姓名,语文,数学和英语3门课程的期末考试成绩. 实现如下要求的功能: 1.根据姓名查询该学生的总成绩: 2.统计全班 ...
使用cmd命令在桌面上新建一个文件夹，且在文件夹中新建一个.java文件,使用cmd命令实现.java文件的编译运行
标题使用cmd命令在桌面上新建一个文件夹,且在文件夹中新建一个.java文件,使用cmd命令实现.java文件的编译运行 1.在电脑桌面使用快捷键win+r打开 2.打开cmd命令界面之后使用md d ...
404 错误页面_如何设计404错误页面，以使用户留在您的网站上
404 错误页面重点 (Top highlight) 网站设计 (Website Design) There is a thin line between engaging and enraging ...
iframe 覆盖父页面_一次iframe子页面与父页面的通信
事件回顾: 收到需求,说是要在别人的系统里嵌入目前由我维护的系统,嵌入的逻辑不多,只有一个创建流程. 刚开始觉得没什么,不就是你改改,我改改,你给我url加个参数,我知道是你调用,修改下页面balab ...
layui 如何动态加载局部页面_从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
layui 如何动态加载局部页面_从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！...
作者:撒网要见鱼原文链接:http://www.dailichun.com/2018/03/12/whenyouenteraurl.html 「----超长文预警,需要花费大量时间.----」本文 ...
小程序订单点击不同页面_小程序跳转页面参数丢失
垂死病中惊坐起,笑问 Bug 何处来?! 1.先是大写字母作祟前两天发布了「柒留言」v2.0.0 新版本,结果...你懂的嘛,没有 Bug 的程序不是好程序,写不出 Bug 的程序员不是好程序员. ...
指令流水一个时钟周期出一个结果_以SM3算法为例，构建一个软硬协作算法加速器：性能分析与优化...
衡量一款 ASIC 芯片可以从 PPA 三个角度进行. PPA 指的是: Power/Performance/Area,功耗 / 性能 / 面积. 衡量 FPGA 设计同样可以参照 PPA,但又有所不 ...

路由到另外一个页面_如何在多个页面中，引入一个公共组件

路由到另外一个页面_如何在多个页面中，引入一个公共组件相关推荐

最新文章

热门文章