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效果圖：