react项目如何动态设置title

本文详细介绍了在React单页应用中如何根据不同路由动态更改页面标题,包括直接在render中设置、使用onEnter和onChange方法,并分析了各方法的适用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不同页面时,title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢?

  1. 在react router中设置:
<Route exact
     path={route.path}
     render={props => {
     document.title = route.title || "默认title"
/>
  1. 直接在render中设置:
render(){
document.title = "title"
}
  1. 使用进入路由的时候设置,onEnter()
<Route onEnter={()=>document.title = "title"}

但是onEnter() 函数只有在进入路由的时候才会触发,如果是在子路由间调换是不换触发的。

  1. 在子路由间跳转的时候设置,onChange()
<Route onChange={()=>document.title = "title"}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值