React项目动态设置title标题的方法示例


Posted in Javascript onSeptember 26, 2018

在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢?

1.在定义路由时增加title属性。

{
    path: "/regularinvestment",
    component: Loadable({
      loader: () => import('./../../business/Regularinvestment/index'),
      loading: PageLoading
    }),
    title: "这是自定义的标题"
  }

2.在路由的index.js获取到自定义的title设置页面标题即可。

const RouteWithSubRoutes = route => {
    return (
      <Route
        exact
        path={route.path}
        render={props => {
          document.title = route.title || "默认title";
          return <route.component {...props} routes={route.routes}></route.component>
        }}
      />
    );
  };
  
  export default () => {
    return allRouters.map((route, i) => {
      return <RouteWithSubRoutes key={i} {...route}/>
    })
  };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
理解javascript中的闭包
Jan 11 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 #Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 #Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 #Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 #Javascript
深入理解react-router 路由的实现原理
Sep 26 #Javascript
node.js使用redis储存session的方法
Sep 26 #Javascript
详解Axios统一错误处理与后置
Sep 26 #Javascript
You might like
在PHP中执行系统外部命令
2006/10/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
js原型链原理看图说明
2012/07/07 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
tab栏切换原理
2017/03/22 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python docx库用法示例分析
2019/02/16 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python PyQt5整理介绍
2020/04/01 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python