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 实用的文字链提示框效果
Jun 30 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
移动端js图片查看器
Nov 17 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 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之Smarty入门
2007/01/04 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
jQuery实现开关灯效果
2020/08/02 jQuery
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python简单获取数组元素个数的方法
2015/07/13 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
详解K-means算法在Python中的实现
2017/12/05 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python中cPickle类使用方法详解
2018/08/27 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python爬虫 正则表达式解析
2019/09/28 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
python基于openpyxl生成excel文件
2020/12/23 Python
2014年市场部工作总结
2014/11/25 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python