建设一个网站需要多少时间,建设工程信息网站,wordpress 新建数据库,做网站时的注册权起到什么作用前言
react-router-dom v6 默认不支持 title设置了#xff0c;所以需要自己实现一下。
属性描述path指定路由的路径#xff0c;可以是字符串或字符串数组。当应用的URL与指定的路径匹配时#xff0c;该路由将会被渲染。element指定要渲染的React组件或元素。children代表…前言
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.titlexxx
},[])但这样每个页面都写很不优雅也很繁琐。所以就需要在入口文件里封装一层。用一个组件包裹所有 的路由。 下面是在 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;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 (BrowserRouterRoutes{routes.map((route) (Routekey{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 (BrowserRouterRoutes{routes.map((route) (Routekey{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实现跳转路由。
