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 握手 ...
随机推荐
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
- PostgreSQL DISTINCT ON
https://stackoverflow.com/questions/3800551/select-first-row-in-each-group-by-group select DISTINCT ...
- SprigBoot中的 WebMvcConfigurer与 WebMvcConfigurerAdapter和 WebMvcConfigurationSupport
WebMvcConfigurationAdapter 过时? 在SpringBoot2.0之后的版本中WebMvcConfigurerAdapter过时了,所以我们一般采用的是如下的两种的解决的方法. ...
- windows 常用的快捷键
记录一些 windows 常用快捷键,待更新 Ctrl系列 快捷键 功能 Ctrl + C 复制 Ctrl + INSERT 复制 Ctrl + V 粘贴 Ctrl + Z 撤销 Ctrl + D 删 ...
- Laravel报错:1071 Specified key was too long; max key length is 1000 bytes
Laravel安装,初始化数据库,运行下列命令时候出错 php artisan migrate 解决办法1,设置数据库引擎格式 //临时更改 SET GLOBAL default_storage_en ...
- dubbo入门学习(二)-----dubbo hello world
一.dubbo hello world入门示例 1.提出需求 某个电商系统,订单服务需要调用用户服务获取某个用户的所有地址: 我们现在需要创建两个服务模块进行测试: 模块 功能 订单服务web模块 创 ...
- Python爬虫笔记【一】模拟用户访问之Tesseract-ocr验证码训练(5)
验证码处理之后就需要对处理的验证码进行识别训练,这里用Tesseract-ocr工具进行识别,用jTessBoxeditor进行训练生成模板. 一,对图片进行处理 利用上一篇代码对图片进行降噪处理,得 ...
- zepto.js按需载入模板对象
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/Joyhen/article/details/34412103 Zepto.js 是支持移动WebKi ...
- spring boot项目启动报DataSource错误
初建一个简单的spring boot 项目,启动后会报错. Exception encountered during context initialization - cancelling refre ...
- matlab中disp函数的简单用法
输出数组类型的数据,也可以把string类型的数据看做数组输出 输出数字 >> num = ; >> disp(num) 输出字符串 >> disp('this i ...