在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. ubuntu与xshell连接不起来:

  2. for update行级锁的作用

    1.for update叫排它锁,是一种行级锁,一旦用户对某个行施加了行级加锁,则该用户可以查询也可以更新被加锁的数据行,其它用户只能查询但不能更新被加锁的数据行.如果其它用户想更新该表中的数据行,则 ...

  3. Leetcode 125.验证回文字符串(Python3)

    题目: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, ...

  4. Lua程序设计之数值

    (摘自Lua程序设计) 数值常量 从Lua5.3版本开始Lua语言为数值格式提供了两种选择:被称为integer的64位整形和被称为float的双精度浮点类型(注意,"float" ...

  5. 简单排列习题2.5 的 2 - 6 P35

    用1,2,3,...9组成3个3位数abc, def, ghi:每个数字恰好用一次,要求 abc:def :ghi = 1: 2 : 3:按照abc : def : ghi的格式输出. 通常想到的思路 ...

  6. IOS开发之基础oc语法

    类 1.类的定义: 类=属性+方法: -属性代表类的特征 -方法是类能对变化做出的反应 类定义的格式:类的声明和类的实现组成 -接口(类的声明):@interface 类名:基类的名字 .类名首字母要 ...

  7. 【python之路44】tornado的用法 (二)

    参考:https://www.cnblogs.com/sunshuhai/articles/6253815.html 一.代码目录构建 代码目录设置如下图: #!/usr/bin/env python ...

  8. k8s 内部各个部件运转

    Master节点部署的都是kubernetes的核心模块APIServer提供资源操作的唯一入口,并且提供认证/授权/kubernets的访问控制可以通过kubectl和自己开发的客户端,通过http ...

  9. IO流16 --- 对象流操作字符串 --- 技术搬运工(尚硅谷)

    序列化 @Test public void test12() throws IOException { ObjectOutputStream oos = new ObjectOutputStream( ...

  10. MySQL 报错:Translating SQLException with SQL state '42000', error code '1064', message

    MySQL报错详细日志 2019-09-12 16:42:29 [http-nio-80-exec-25] DEBUG [org.springframework.jdbc.support.SQLErr ...