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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue中用 async/await 来处理异步操作
Jul 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导出oracle库的php代码
2009/04/20 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python日志模块logbook使用方法
2019/09/19 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
个人求职信范文分享
2014/01/06 职场文书
《颐和园》教学反思
2016/02/19 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL