React项目动态设置title标题

sherlock221 发布于2019-08-23 12:07 / 2473人阅读

摘要：在搭建的项目中页面的是直接写在入口中，当路由在切换不用页面时，是不会动态变化的。这是自定义的标题在路由的获取到自定义的设置页面标题即可。

在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项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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】第4天: 复杂组件

摘要：本文转载自众成翻译译者链接原文太棒了，我们已经构建了第一个组件。天前一章节，我们开始构建我们的第一个组件。内容部分内有个不同的项目组件。决定划分组件的深度比科学更显得艺术。子组件当组件嵌套在另一个组件中时，它被称为子组件。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3817原文：https://www.fullstackre...

Mike617 2019-08-20 18:29 评论0 收藏0