React项目动态设置title标题

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

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

在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类、ES7属性初始化（第二部分）

摘要：组建属性初始化默认值类型在中将下面的代码替换成下面的代码最后一步将初始状态从构造函数中转变成属性初始化。在构造函数的后天添加正确的代码你需要把状态初始化代码从构造函数中删除。这是React和ECMAScript6结合使用系列文章的第二篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类，方法绑定...

VioletJack 2019-08-20 17:59 评论0 收藏0