React-router 5.0项目中统一动态设置路由页面Title

React项目中想在不同的路由页面都有自己的独立title，并且统一设置。

可以在每个路由页面的 componentDidMount() 钩子回调中 document.title = ‘title’ 来设置，但是这样太麻烦，每个路由页面都需要单独设置

于是，研究出一种更好的方式，在Index.js 入口处统一设置 document.title = ‘title’：

我的项目是把路由和设置独立写的，方便管理，以及其他权限功能等等。

routes.js

import Index from "../pages/Index";
import Home from '../pages/Home/Index'
import Classify from '../pages/Home/Classify'
import ShoppingCart from '../pages/Home/ShoppingCart'let routes = [{path: '/Index',component: Index,meta:{title:'商城首页'}},{path:'/Home',component:Home,meta:{title:'主页'},children:[{path:'/Home/Classify',component:Classify,meta:{title:'商品分类'},},{path:'/Home/ShoppingCart',component:ShoppingCart,meta:{title:'购物车'},}]}
]export default routes

index.js 入口文件：

import React from 'react';
import ReactDOM from 'react-dom'
import routes from './router/routes'
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import App from "./App";
import { Provider } from 'react-redux'

利用 document.title 在每个Route路由文件设置

这里不推荐使用 onEnter 钩子函数设置，此API在react-router 4.0 被废弃了

设置title效果图：

React-router 5.0项目中统一动态设置路由页面Title相关推荐

Vue 动态设置路由Meta title 名称
路由配置 import ('@/views/accountManagement/editMain'), beforeEnter: (to, from, next) => {if (to.quer ...
初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
[react] 你有在项目中使用过Yeoman脚手架吗？
[react] 你有在项目中使用过Yeoman脚手架吗? 前端工程化脚手架部分必备的依赖,用于初始化生成规范的项目目录个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷. ...
MariaDB 10.0.X中，动态列支持 JSON 格式来获取数据
MariaDB 10.0.X中,动态列(Dynamic Columns),可以支持 JSON 格式来获取数据. 为了兼容传统SQL语法,MariaDB 10和MySQL5.7支持原生JSON格式,即关 ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
【Andorid X 项目笔记】动态设置ViewPager的Adapter问题（2）
由于没有找到嵌套FragmentActivity的方法,只好打算用不同的FragmentPagerAdapter来动态切换ViewPager的,如下: /** * 首页切换的三个界面 ...
Vue项目中background-image属性设置方法
vue项目中background-image属性设置方法方式一:直接访问在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理. <span cl ...
python编写交互界面查分app_Django项目中model的数据处理以及页面交互方法
Django中Models是什么: 通常,一个Model对应一张数据表, Django中Models以类的形式表现, 它包含一些基本字段以及数据的一些行为 ORM: 对象关系映射(Object Rel ...

React-router 5.0项目中统一动态设置路由页面Title

React-router 5.0项目中统一动态设置路由页面Title相关推荐

最新文章

热门文章