React項目動態設置title標題

sherlock221 發布于2019-08-23 12:07 / 2603人閱讀

摘要：在搭建的項目中頁面的是直接寫在入口中，當路由在切換不用頁面時，是不會動態變化的。這是自定義的標題在路由的獲取到自定義的設置頁面標題即可。

在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 (
             {
                    document.title = route.title || "默認title";
                    return 
                }}
            />
        );
    };
    
    export default () => {
        return allRouters.map((route, i) => {
            return 
        })
    };

GPU云服務器云服務器 title標題網頁title標題設置title 怎么部署react項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97963.html

【全棧React】第5天: 數據驅動

摘要：今天，我們將把我們的組件設置為由數據驅動，訪問外部數據。介紹屬性允許我們以與相同的語法向組件發送數據，使用組件上的特性或屬性。我們將我們的活動項目移動到我們將針對每個項目運行的項目中。本周，我們使用概念更新了由數據驅動的組件。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3821原文：https://www.fullstack...

inapt 2019-08-20 18:29 評論0 收藏0
react-navigation使用詳解

摘要：導航組件使用詳解注意了，如果有小伙伴們發現運行作者提供的示例項目報如下的錯誤，可能是大家使用了命令導致的，解決這個錯誤的辦法就是將刪除，然后重新使用命令來安裝，最后使用來起服務，應該就不報錯了。 react-navigation導航組件使用詳解注意了，如果有小伙伴們發現運行作者提供的react-navigation示例項目報如下的錯誤，可能是大家使用了 yarn install 命...

stonezhu 2019-08-23 11:47 評論0 收藏0
React中使用外部樣式的3中方式

摘要：一關于的認識是一種使用編寫樣式的處理方案。意味著你不需要關心如何檢測和刪除那些未使用的代碼。支持變量和繼承你可以使用變量來設置不同的樣式，使用這些不同樣式時只需要給樣式組件傳遞一個參數即可。一、關于css-in-js的認識 1、css-in-js是一種使用 js 編寫 css 樣式的 css 處理方案。它的實現方案有很多，比如styled-components、polished、glam...

vboy1010 2019-05-27 17:42 評論0 收藏0
React類、ES7屬性初始化（第二部分）

摘要：組建屬性初始化默認值類型在中將下面的代碼替換成下面的代碼最后一步將初始狀態從構造函數中轉變成屬性初始化。在構造函數的后天添加正確的代碼你需要把狀態初始化代碼從構造函數中刪除。這是React和ECMAScript6結合使用系列文章的第二篇。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類，方法綁定...

VioletJack 2019-08-20 17:59 評論0 收藏0