在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. Apache Pig学习笔记(二)

     主要整理了一下,pig里面的一些关键词的含义和用法,pig虽然是一种以数据流处理为核心的框架,但数据库的大部分关键词和操作,在pig里面基本上都能找到对应的函数,非常灵活与简洁,春节前的最后一篇文章 ...

  2. yii2-user 一个好用的用户扩展

    最近使用yii2做了一个系统,涉及到了用户登录等等,之前是自己写的一套,后来要添加邮箱验证功能.有点懒,然后看到了yii2-user这个扩展.简单说下,毕竟自己研究也不深. http://yii2-u ...

  3. windows 遍历目录下的所有文件 FindFirstFile FindNextFile

    Windows下遍历文件时用到的就是FindFirstFile 和FindNextFile 首先看一下定义: HANDLE FindFirstFile( LPCTSTR lpFileName, // ...

  4. JZOJ P5829 HZOI 20190801 A string 线段树

    JZOJ P5829 A. string 题面:https://www.cnblogs.com/Juve/articles/11286476.html 考场上想起了排序这道题:https://www. ...

  5. crm-ssh-列表显示(顾客列表,用户,联系人列表)

    客户列表 1 分析 2 书写步骤 1.封装PageBean 2.书写Action 3.书写Service 4.书写Dao 5.完成strutx以及spring的配置 6.书写前台list.jsp页面 ...

  6. mybatis学习:mybatis注解开发一对一的查询配置

    实体类: public class Account { private Integer id; private Integer uid; private Double money; private U ...

  7. SSM2-搭建maven常见的错误以及解决方法

    1.项目中的jdk版本电脑自带的jdk版本不一致 mavne-parent 的pom.xml文件 <!-- java编译插件 --> <plugin> <groupId& ...

  8. 用reduce装逼 之 多个数组中得出公共子数组,统计数组元素出现次数

    昨天做了一道美团的面试题,要求是给N个数组,找出N个数组的公共子数组. ,,,,]; ,,,,]; ,,,,]; ,,,,]; 以上四个数组,有公共子数组2, 3,7 function main(){ ...

  9. mybatis深入理解(五)-----MyBatis的一级缓存实现详解 及使用注意事项

    0.写在前面 MyBatis是一个简单,小巧但功能非常强大的ORM开源框架,它的功能强大也体现在它的缓存机制上.MyBatis提供了一级缓存.二级缓存 这两个缓存机制,能够很好地处理和维护缓存,以提高 ...

  10. python 显示彩色文本

    实现过程:      终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.      转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用 ...