React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例
更新時(shí)間：2018年09月26日 11:25:33 作者：就這樣簡(jiǎn)簡(jiǎn)單單
這篇文章主要介紹了React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在React搭建的SPA項(xiàng)目中頁(yè)面的title是直接寫(xiě)在入口index.html中，當(dāng)路由在切換不用頁(yè)面時(shí)，title是不會(huì)動(dòng)態(tài)變化的。那么怎么讓title隨著路由的切換動(dòng)態(tài)變化呢？
1.在定義路由時(shí)增加title屬性。
{
path: "/regularinvestment",
component: Loadable({
loader: () => import('./../../business/Regularinvestment/index'),
loading: PageLoading
}),
title: "這是自定義的標(biāo)題"
}
2.在路由的index.js獲取到自定義的title設(shè)置頁(yè)面標(biāo)題即可。
const RouteWithSubRoutes = route => {
return (
<Route
exact
path={route.path}
render={props => {
document.title = route.title || "默認(rèn)title";
return <route.component {...props} routes={route.routes}></route.component>
}}
/>
);
};
export default () => {
return allRouters.map((route, i) => {
return <RouteWithSubRoutes key={i} {...route}/>
})
};
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談react?16.8版本新特性以及對(duì)react開(kāi)發(fā)的影響
本文主要介紹了react?16.8版本新特性以及對(duì)react開(kāi)發(fā)的影響，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在react中對(duì)less實(shí)現(xiàn)scoped配置方式
這篇文章主要介紹了在react中對(duì)less實(shí)現(xiàn)scoped配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
react antd如何防止一份數(shù)據(jù)多次提交
這篇文章主要介紹了react antd如何防止一份數(shù)據(jù)多次提交問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解如何在React單頁(yè)面應(yīng)用中捕獲錯(cuò)誤
在當(dāng)前的Web開(kāi)發(fā)中,使用React構(gòu)建單頁(yè)面應(yīng)用（SPA）已經(jīng)成為一種常見(jiàn)的做法,然而,當(dāng)應(yīng)用程序遇到錯(cuò)誤時(shí),有可能會(huì)導(dǎo)致整個(gè)頁(yè)面崩潰,給用戶帶來(lái)不好的體驗(yàn),本文將介紹如何在React單頁(yè)面應(yīng)用中捕獲錯(cuò)誤,以防止整個(gè)頁(yè)面的崩潰,需要的朋友可以參考下2023-09-09
react hook使用useState更新數(shù)組,無(wú)法更新問(wèn)題及解決
這篇文章主要介紹了react hook使用useState更新數(shù)組,無(wú)法更新問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React倒計(jì)時(shí)功能實(shí)現(xiàn)代碼——解耦通用
這篇文章主要介紹了React倒計(jì)時(shí)功能實(shí)現(xiàn)——解耦通用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
React文字展開(kāi)收起組件的實(shí)現(xiàn)示例
本文主要介紹了React文字展開(kāi)收起組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本文主要介紹了Electron+React應(yīng)用打包全流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要為大家介紹了Remix如何支持原生CSS的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05