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字典探测用户名工具
Oct 05 Javascript
jquery maxlength使用说明
Sep 09 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
js确定对象类型方法
Mar 30 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
vue实现购物车列表
Jun 30 Javascript
js实现盒子移动动画效果
Aug 09 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
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
PHP5函数小全(分享)
2013/06/06 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP实现简易计算器功能
2020/08/28 PHP
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python如何更新包
2020/06/11 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
班级学雷锋活动总结
2014/06/26 职场文书
领导班子四风表现材料
2014/08/23 职场文书
2014年团委工作总结
2014/11/13 职场文书
外国人来华邀请函
2015/01/31 职场文书