React項(xiàng)目動態(tài)設(shè)置title標(biāo)題的方法示例
更新時(shí)間：2018年09月26日 11:25:33 作者：就這樣簡簡單單
這篇文章主要介紹了React項(xiàng)目動態(tài)設(shè)置title標(biāo)題的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在React搭建的SPA項(xiàng)目中頁面的title是直接寫在入口index.html中，當(dāng)路由在切換不用頁面時(shí)，title是不會動態(tài)變化的。那么怎么讓title隨著路由的切換動態(tài)變化呢？
1.在定義路由時(shí)增加title屬性。
{
path: "/regularinvestment",
component: Loadable({
loader: () => import('./../../business/Regularinvestment/index'),
loading: PageLoading
}),
title: "這是自定義的標(biāo)題"
}
2.在路由的index.js獲取到自定義的title設(shè)置頁面標(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}/>
})
};
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用 React Router Dom 實(shí)現(xiàn)路由導(dǎo)航的詳細(xì)過程
React Router Dom 是 React 應(yīng)用程序中用于處理路由的常用庫,它提供了一系列組件和 API 來管理應(yīng)用程序的路由,這篇文章主要介紹了使用 React Router Dom 實(shí)現(xiàn)路由導(dǎo)航,需要的朋友可以參考下2024-03-03
前端進(jìn)行大文件分片上傳的方案幾乎都是利用Blob.prototype.slice方法對文件進(jìn)行分片，用數(shù)組將每一個分片存起來，最后將分片發(fā)給后端，本文給大家介紹React大文件分片上傳方案，感興趣的朋友跟隨小編一起看看吧2023-08-08
在react類組件（class）寫法中，有setState和生命周期對狀態(tài)進(jìn)行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性2022-08-08
這篇文章主要介紹了react使用antd表單賦值,用于修改彈框的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
useReducer是在react V16.8推出的鉤子函數(shù)，從用法層面來說是可以代替useState。相信前期使用過 React 的前端同學(xué)，大都會經(jīng)歷從class語法向hooks用法的轉(zhuǎn)變，react的hooks編程給我們帶來了絲滑的函數(shù)式編程體驗(yàn)2022-10-10
React生命周期方法之componentDidMount的使用
這篇文章主要介紹了React生命周期方法之componentDidMount的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React Native使用fetch實(shí)現(xiàn)圖片上傳的示例代碼
本篇文章主要介紹了React Native使用fetch實(shí)現(xiàn)圖片上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了react的hooks的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了React 實(shí)現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01