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 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
触摸春天教学反思
2014/02/03 职场文书
担保书怎么写
2014/04/01 职场文书
实践单位评语
2014/04/26 职场文书
党员目标管理责任书
2014/07/25 职场文书
公司授权委托书样本
2014/09/15 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
企业计划生育责任书
2015/05/09 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
redis限流的实际应用
2021/04/24 Redis
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
Redis keys命令的具体使用
2022/06/05 Redis