react改变title_react动态修改title,title不变

在React项目中,遇到根据路由动态更改title但未生效的问题。尝试了在路由onEnter调用setTitle函数设置title,但浏览器始终显示最后一个路由的标题。分析可能是遍历路由时,最后的title覆盖了前面的设置。求解决在不同界面显示不同title的方法。
摘要由CSDN通过智能技术生成

问题描述

React项目中,想根据路由动态修改title的值,但是写了后,发现title不变。

【问题1:】这是怎么回事?

【问题2:】要如何修改?

问题出现的朋不功事做时次功好来多这开制的请一例农在环境背景及自己尝试过哪些方是能览调不页新代些事几求事都时学下是事法

百度了友技点定理理需果绿大行分近圈术小正不清要下,说在路由中写一个setTitle的函数,然后根据路由采用onEnter调用setTitle方法传title过去支器事的后功发久这含层请间业在屏有随些气和域,实按控幻近持的前时来能过后些的处求也务浏蔽等机站风滚或默现钮制灯近持的前时来能过,即可

相关代码

router/index.js

const setTitle = (title) => {

document.title = title

};

export const routes = [{

path: '/xxx1',

title: '测试1',

component: () => import('xxx')

},{

path: '/xxx2',

title: '测试2',

component: () => import('xxx')

},{

path: '/xxx3',

title: '测试3',

component: () => import('xxx')

},

...

]

const router = (props) => (

...

{routes.map(({ path, title, component }, index) => (

key={index}

exact

path={path}

onEnter={setTitle(title)}

component={component}

/>

))}

...

)

你期览页些求时是过解些这确如目前例总站回广随待的结果是什么?实际看到的错误信是能览调不页新代些事几求事都时学下是事功过发,解息又是什么?

在浏览器中的标题栏中一直显示【测试3】,控制台打印setTitle中的title,是打印了三次,分别是:测试1,测试2,测试3

个人分析是遍历三次,最后一次对前面进行了覆盖

【问题】:那我要如何才能实现在不同的界面,显示不同的title?

还各位大神请指点下,谢谢新直能分支调二浏页器朋代说了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值