在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. pin, port, cell, net

    一幅图即可解释清楚: 更标准的官方解释:

  2. Spring的自定义注解简单实现

    1.注解的示例为在方法入参上加后缀 注解代码示例: @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) @Documente ...

  3. HZOI2019建造游乐园(play)组合数学,欧拉图

    题目:https://www.cnblogs.com/Juve/articles/11186805.html(密码是我的一个oj用户名) solution: 反正我是想不出来... 题目大意就是要求出 ...

  4. [CQOI2011]放棋子--DP

    题目描述: 输入格式 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数.第二行包含c个正整数,即每个颜色的棋子数.所有颜色的棋子总数保证不超过nm.N,M<=30 C<=10 ...

  5. Java的跨平台特性

    语言跨平台是编译后的文件跨平台,而不是源程序跨平台.Java源代码首先经过编译器生成字节码,即class文件,该class文件与平台无关,而class文件经过解释执行之后翻译成最终的机器码,这是平台相 ...

  6. php缓存技术有哪些(总结)

    php缓存技术有哪些(总结) 一.总结 一句话总结: 静态页面:全页面静态化缓存,页面部分缓存(将页面中不常变动的部分进行静态化缓存), 数据缓存:比如我的每轮的题目数据,商店,寻宝数据等 数据库:查 ...

  7. RSA加密算法在WEB中的应用

    加密算法有很多,如不可逆的摘要算法MD5.SHA(安全哈希算法),可逆的Base64编码,对称加密算法DES.AES,还有非对称加密算法DH.RSA等.那是不是说明我们可以使用任何一种加密算法就能保证 ...

  8. IO流14 --- 打印流的使用 --- 技术搬运工(尚硅谷)

    PrintStream 字节打印流PrintWriter 字符打印流 @Test public void test9() throws Exception { FileOutputStream fos ...

  9. react高阶函数组件

    Layout as a Higher Order Component // components/MyLayout.js import Header from './Header'; const la ...

  10. 利用GitHub来进行团队协作开发项目

    首先: 1.项目组长要在GitHub创建一个仓库 2.组长git clone仓库地址到本地   3.组长在本地克隆到的项目里面创建一个Django项目  4.在当前项目下进行git add以及git ...