react-router v6实现动态的title(react-router-dom v6)

前言

react-router-dom v6 默认不支持 title设置了，所以需要自己实现一下。

属性	描述
path	指定路由的路径，可以是字符串或字符串数组。当应用的URL与指定的路径匹配时，该路由将会被渲染。
element	指定要渲染的React组件或元素。
children	代表该路由下的子路由。可以是多个 Route 组件或者其他React元素。
caseSensitive	指定路径匹配是否区分大小写，默认为 false。
sensitive	指定路径匹配是否敏感于尾 / 字符，默认为 false。
index	指定是否当父级路径与当前URL完全匹配时，渲染该路由。
mergeParams	指定是否混合父级路由的参数到当前路由。
element	指定要渲染的React组件或元素。

react-router-dom v6 官方文档

实现过程

实现思路就是，一进入页面就 设置一下 title的值：
一进入页面，我们可以用 userEffect 或componentDidMounted动态设置title 可以用document.title = xx。

useEffect(()=>{
document.title="xxx"
},[])

但这样每个页面都写，很不优雅，也很繁琐。所以就需要在入口文件里封装一层。用一个组件包裹所有 的路由。
下面是在 create-react-app里的实现过程，其他也大差不差。

1.在路由配置里加上一个 title字段
在src下新建一个 routes.js，其他名也行。引入组件 定义一个routes并export。

// 导入你的页面组件  
import Home from './pages/home'; 
import FundDetail from './pages/detail';
const routes = [
  { path: "/", component: <Home/>,title:"首页"},

  { path: "/detail/:id", component: <FundDetail/>,title:"详情页"},
  // {
  //   path: "*", component:404
  // }

];

export default routes;

2. App.js里 引入 routes.js，并循环创建 Route。
   必须 Routes 包裹 Route才行。我用的是hostory模式，你可以改成hash 把BrowserRouter 换成HashRouter 即可。

完整代码：

import React from "react";
import { BrowserRouter, Routes, Route, HashRouter } from "react-router-dom";
import routes from "./routes.js";

// 封装一层 专门负责显示页面标题

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            element={route.component}
          
          />
        ))}

        {/* <Route path="/detail/:fundCode" element={<FundDetail />} /> */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

3.封装一个组件，专门改变 title,并且这个组件包裹所有组件。

// 封装一层 专门负责显示页面标题
const PageTitle = ({ route}) => {
  const { title ,component} = route;
  document.title = title;
  return <>{component}</>;
};

然后 Route 里element改成：

element={<PageTitle route={route} />}

完整代码如下：

import React from "react";
import { BrowserRouter, Routes, Route, HashRouter } from "react-router-dom";
import routes from "./routes.js";
import "react-vant/es/styles";
// 封装一层 专门负责显示页面标题
const PageTitle = ({ route}) => {
  const { title ,component} = route;
  document.title = title;
  return <>{component}</>;
};
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            //element={route.component   }
            element={<PageTitle route={route} />}
          
          />
        ))}

        {/* <Route path="/detail/:fundCode" element={<FundDetail />} /> */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

路由模式和更多配置可以看:
react-router-dom v6 路由模式

补充：

获取路由参数:

import { useParams, useLocation } from "react-router-dom";
const {id}=useParams;

跳转路由编程式导航：

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
navigate(`/detail/${id}`);

也可以用 Link实现跳转路由。