使用useRoutes时如何统一设置title

常规遍历路由的方式大家都熟悉了，这里就不赘述了，这里主要是介绍使用useRoutes时，怎么统一设置title

可以用一个Layout组件包裹element,然后设置title可以写在Layout里面，当然也可以就写在app里面，看个人喜好

react-router-dom版本

"react-router-dom": "^6.4.2",

App.js

import { useRoutes } from 'react-router-dom';
import { routeList } from '@pages/routers';
import Layout from './Layout';
function App() {
  const element = useRoutes(routeList);
  return (
          <Layout>
            {element}
          </Layout>
  );
}

export default App;

Layout.js

• matchPath(route.path,pathname)
• 如果你的路由是树形的，那就要转成数组，不是的话直接遍历，用matchPath匹配到和你当前pathname一致的路由就会返回一个对象，否则就返回null

import { useCallback, useEffect, useMemo } from 'react';
import { useLocation,  useMatch, matchPath } from 'react-router-dom';
import { routeList } from './routers';
// 树形转数组
export const treeToArray = (arrayList) => {
  const list = [];
  const listFun = (ll) => {
      ll.map(li => {
              list.push(li);
              const children = li.children
              if (children && Array.isArray(children)) {
                  listFun(children.slice(0))
              }
              return list
      })
      return list
  }
  listFun(arrayList)
  return list
}

const Layout = ({  children }) => {
    const { pathname } = useLocation();

    const routerTitle = useMemo(() => {
        const list = treeToArray(routeList); // 如果你的路由不是树形的，可以不用转
        const title = list.filter(route => route['title'] && matchPath(route.path,pathname))
        return Array.isArray(title) && title.length ? title[0]['title'] : '标题'
    }, [routeList, pathname])

    useEffect(() => {
      document.title = routerTitle
    }, [routerTitle])
    </div>
    return (
        <div className={style.layout_content}>
            {children}
        </div>
    );
};

export default Layout;

routers.js

export const routeList = [
  {
	path: '/home/index',
    name: 'Home',
    element: <Home />, // 使用useRoutes必须传组件形式不可以传Home
    title:'首页',
    children:[
	   {
        path: '/home/index/logo',
        name: 'Logo',
        element: <Logo />,
        title:'Logo'
      },
	]
  },
    {
	path: '/home/two',
    name: 'Two',
    element: <Two />,
    title:'信息'
  },
]

总结

其实就是匹配一下你的当前pathname和你routerList里设置的path一致，然后获取到你设置的title，再document.title一下就行了