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 相关文章推荐
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php xml-rpc远程调用
2008/12/19 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
实例讲解PHP表单处理
2019/02/15 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python 数据加密代码
2008/12/24 Python
python实现决策树分类算法
2017/12/21 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
自荐信要包含哪些内容
2013/11/06 职场文书
小学生暑假感言
2014/02/06 职场文书
人力资源作业细则
2014/03/03 职场文书
大学专科求职信
2014/07/02 职场文书
小学班主任事迹材料
2014/12/17 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书