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 相关文章推荐
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
javascript数据类型示例分享
Jan 19 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
php实现微信公众号无限群发
2015/10/11 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
JS实现小米轮播图
2020/09/21 Javascript
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python中类型检查的详细介绍
2017/02/13 Python
python实现图像识别功能
2018/01/29 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python中dict()的高级用法实现
2019/11/13 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
UML设计模式笔试题
2014/06/07 面试题
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2014年就业工作总结
2014/11/26 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers