React项目动态设置title标题
在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标题的更多相关文章
- 小程序之--动态设置页面标题 wx.setNavigationBarTitle
参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...
- 【随笔】设置title标题图标为自定义图片
第一步: 利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件. 第二步: 在<head></head ...
- 动态设置html的title
使用vue前端框架做,竟然丢弃了很多javascript和html的东西了..动态设置title的方法: 1.使用vue的自定义指令 <div v-title>{{htmltitle}}& ...
- vue动态设置页面title方法
第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wech ...
- 小程序动态修改页面标题setNavigationBarTitle
可以使用setNavigationBarTitle方法动态设置页面标题 wx.setNavigationBarTitle({ title: options.name, })
- 单页应用动态设置页面title
1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { ...
- react-create-app 构建react项目的流程以及需要注意的地方
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...
- React项目中使用HighCharts
大家都知道BizCharts是基于react封装的一套图表工具,而HighCharts是基于jQuery的.但是由于本人对BizCharts甚是不熟,所以在react项目开发中选择了HighChart ...
- 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...
随机推荐
- Liunx常用命令行(Ubuntu)
关闭防火墙的命令行: 1. 永久性生效 开启:chkconfig iptables on 关闭:chkconfig iptables off 2. 即时生效,重启后失效 开启:service ipta ...
- fwt优化+树形DP HDU 5909
//fwt优化+树形DP HDU 5909 //见官方题解 // BestCoder Round #88 http://bestcoder.hdu.edu.cn/ #include <bits/ ...
- Fiilter
过滤器 过滤请求和响应 作用: 自动登录. 统一编码. 过滤关键字 .... Filter是一个接口 编写filter步骤: 1.编写一个类 a ...
- SQL Server代码如何快速格式化,sqlserver代码
在SQL Server中我们经常需要编写各种SQL脚本,例如存储过程和函数等,由于在编写过程中,经常会进行调整,有些关键字我们用的大写,有的我们用的小写,有的后面结束用:分割有的又没有.对于有强迫症的 ...
- Python移动自动化测试面试
Python移动自动化测试面试 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候可以关 ...
- Python学习之列表--自动超市购物车
效果图: 实现代码: menu = [0,5000,500,9000,3000,30,50,7000,70,40]name = [0,"iphone","bicycle& ...
- Win3.2有人用过么
老牌子的操作系统. 了,有人用过么,我还在用,感觉挺不错的,哈哈哈哈哈. 1.0那一代,画面粗糙,几乎不能算GUI操作系统. 2.0,画面较1.0一代明显改善,可惜的是,手头没货. 3.0 ...
- 矩阵快速幂求Fibonacci
原理 我们取矩阵A 则 F1=F2=1;则可以轻易求出F(i) #define maxn 2 #define mo 1000000007 struct Matrix{ long long a[maxn ...
- 技术人自己的KPI
为什么需要技术KPI 在业务技术团队,有一个不好的趋势,就是团队越来越业务,越来越没有技术味道.每个人都在谈业务,技术大会上在谈业务,周会上在聊业务,周报里写的是业务项目......唯独少被谈及的是技 ...
- TZ_01MyBatis_log4j.propertiies
# Set root category priority to INFO and its only appender to CONSOLE. #log4j.rootCategory=INFO, CON ...