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 握手 ...
随机推荐
- 使用Log4net把日志写入到SqlServer数据库
1.官网URL: http://logging.apache.org/log4net/ 2.配置文件参照URL: http://logging.apache.org/log4net/release/c ...
- 最小费用最大流——EK+SPFA
终于把最小费用最大流学会了啊-- 各种奇奇怪怪的解释我已经看多了,但在某些大佬的指点下,我终于会了. 原来是个好水的东西. 最小费用最大流是什么? 不可能不知道网络流吧?如果不知道,自行百度去-- 费 ...
- 【hihocoder 1477】闰秒
[题目链接]:http://hihocoder.com/problemset/problem/1477 [题意] 中文题 [题解] 首先,一年一年地加,把开始的年份和结束的年份之间的年根据是否为闰年; ...
- 双系统可以进入Windows但进入Ubuntu时无法进入系统引导,只有左上角光标闪
双系统可以进入Windows但进入Ubuntu时无法进入系统引导,只有左上角光标闪 这时候可以进入windows下的easyBCD重新创建ubuntu引导项即可
- ROS 日志消息(C++)
1.日志级别 日志消息分为五个不同的严重级别宏,与Android的Log定义的严重级别类似,如下基础宏: ROS_DEBUG_STREAM.ROS_INFO_STREAM.ROS_WARN_STREA ...
- java的四个访问权限修饰符的作用范围
- Extjs 疑难杂症 (LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏)
一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...
- c++ stream操作杂记
包含简单的读写文件,供初学者入门,stream目前包含三种,终端,文件,内存,注意宽字节. ) ; ) ; ] ; } pasting
- Trie性能分析之敏感词过滤golang
package util import ( "strings" ) type Node struct { //rune表示一个utf8字符 char rune Data inter ...
- [Day1] 初识Nginx
一. Nginx的诞生 Nginx是一个高效的web及反向代理服务器,它的第一版发布于2012年,晚于如今占据最大市场份额的Apache.那么Nginx的诞生肩负了哪些使命呢?或者说它于Apache的 ...