在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}/>
})
};

来源:https://segmentfault.com/a/1190000016509718

React项目动态设置title标题的更多相关文章

  1. 小程序之--动态设置页面标题 wx.setNavigationBarTitle

    参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...

  2. 【随笔】设置title标题图标为自定义图片

    第一步: 利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件. 第二步: 在<head></head ...

  3. 动态设置html的title

    使用vue前端框架做,竟然丢弃了很多javascript和html的东西了..动态设置title的方法: 1.使用vue的自定义指令 <div v-title>{{htmltitle}}& ...

  4. vue动态设置页面title方法

    第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wech ...

  5. 小程序动态修改页面标题setNavigationBarTitle

    可以使用setNavigationBarTitle方法动态设置页面标题 wx.setNavigationBarTitle({ title: options.name, })

  6. 单页应用动态设置页面title

    1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { ...

  7. react-create-app 构建react项目的流程以及需要注意的地方

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...

  8. React项目中使用HighCharts

    大家都知道BizCharts是基于react封装的一套图表工具,而HighCharts是基于jQuery的.但是由于本人对BizCharts甚是不熟,所以在react项目开发中选择了HighChart ...

  9. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

随机推荐

  1. springboot 2+ druid

    springboot 1+ druid druid 配置 import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid ...

  2. DataSourceUtils(使用C3P0连接池的工具类)

    一.导入jar包(c3p0-0.9.1.2.jar) 2.添加配置文件(放在src下) 配置文件的名称:c3p0.properties 或者 c3p0-config.xml 放在src之下 c3p0. ...

  3. spring_配置处理器对象、处理器映射器、处理器适配器、视图解析器

    创建spring配置文件:application-context.xml. 创建处理器类 package com.lanou.demo.controller;public class BookCont ...

  4. jeecms 配置可以低级别用户流程

    使用管理员admin登录后台,进入用户—>管理员(本站)à添加,填写用户名.密码等信息,如下图: 需要注意几个权限控制的问题: 1,  等级,值越大等级越高,等级高的管理员可以审核等级低的管理员 ...

  5. struts2-自定义拦截器-struts2标签

    1 自定义拦截器 1.1 架构 1.2 拦截器创建 创建方式1 创建方式2 创建方式3 ★★★★ 1.3 拦截器api 放行 前后处理 不放行,直接跳转到一个结果页面 不执行后续的拦截器以及Actio ...

  6. Luogu P1462 通往奥格瑞玛的道路(最短路+二分)

    P1462 通往奥格瑞玛的道路 题面 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己 ...

  7. vim编辑器操作②

    本文主要介绍vim的常用编辑命令: 字符编辑: x:删除光标所在处的字符: #x:删除光标所在处起始的#个字符: 替换命令: r:替换光标所在处的字符: rCHAR; 例如:替换list中的l为大写L ...

  8. mongodb本地搭建过程

    1.解压安装包后安装 安装时注意:1.选择customs    2.路径选择C盘以外的盘符 安装完成后: 2.在bin的同级目录下新建data.log文件夹 3.在data文件夹下新建db文件夹,在l ...

  9. [转]文件file属性详解

    不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...

  10. 猜数字游戏_Python

    预先设置数字变量 age_of_test = 25 #这里设置为25,也可随意 guess_age = int (input("guess age:")) if guess_age ...