React專案如何動態設定title標題（程式碼）

這篇文章帶給大家的內容是關於React專案如何動態設定title標題（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在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 (
            <Route
                exact
                path={route.path}
                render={props => {
                    document.title = route.title || "默认title";
                    return <route.component {...props} routes={route.routes}></route.component>
                }}
            />
        );
    };
    
    export default () => {
        return allRouters.map((route, i) => {
            return <RouteWithSubRoutes key={i} {...route}/>
        })
    };

以上是React專案如何動態設定title標題（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！