在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. idea永久使用本地的maven设置

    1.要想是永久的,就选择other settings

  2. [转]用HttpSessionListener与HttpSessionBindingListener实现在线人数统计

    原文链接:http://www.cnblogs.com/shencheng/archive/2011/01/07/1930227.html 下午比较闲(其实今天都很闲),想了一下在线人数统计方面的实现 ...

  3. python 日记 day5 字典

    一.数据类型分为: 1.不可变数据类型:元组,bool,int,str (不可更改的又叫可哈希) 2.可变数据类型 :list,dict ,set   (可变的又叫不可哈希) 字典: 优点:1.可二分 ...

  4. Maven实战07_依赖

    1:依赖声明 <project> ... <dependencies> <dependency> <groupId>...</groupId> ...

  5. CentOS 6.5 MySQL安装

    yum search mysql #查看mysql包 yum -y install mysql-server #安装mysql,注意是mysql-server iptables -I INPUT -p ...

  6. C# 全局Hook在xp上不回调

    最近做了个捕捉全局鼠标,获取目标窗体内的控件文本信息,点击的按钮信息.用的全局钩子.在win10上运行正常,部署到xp系统上就没有反应.查了些资料,解决了此问题. 原本安装钩子的写法如下: Nativ ...

  7. Jquery 页面打印

    <script src="~/Scripts/js/dist/jquery.jqprint-0.3.js"></script> <script typ ...

  8. Gradle:gradle下载插件

    https://github.com/michel-kraemer/gradle-download-task 用法在readme中已经讲的很清楚了,我主要介绍下注意事项吧. 我用这个插件的目的是为了让 ...

  9. linux下文件操作之cp和mv

    Linux CP文件夹略过目录的解决 root@QGY:/home/qgy# cp image/newimage_raw /mnt/4T/qin/cp: 略过目录'image/newimage_raw ...

  10. JavaScript内容回顾

    <!DOCTYPE html> <!--JavaScript内容回顾--> <html lang="en"> <head> < ...