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 相关文章推荐
jquery remove方法应用详解
Nov 22 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue生命周期的探索
Apr 03 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
JavaScript数组去重实现方法小结
Jan 17 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
pymysql模块的使用(增删改查)详解
2019/09/09 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python定义一个函数的方法
2020/06/15 Python
python实现斗地主分牌洗牌
2020/06/22 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
python爬取youtube视频的示例代码
2021/03/03 Python
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
高中军训感言200字
2014/02/23 职场文书
小学庆六一活动方案
2014/02/28 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
道歉短信大全
2015/05/12 职场文书
建党伟业的观后感
2015/06/01 职场文书
新学期开学标语2015
2015/07/16 职场文书
关于运动会的广播稿
2015/08/19 职场文书