react.js|react-router-dom V6的配置使用前端|javascript

最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，也不算啥新东西）…

文章图片

V6的版本相对于V5,做了很多的优化，有书写方面的、路由的嵌套、路由配置化、鉴权方面等等，下面就简单的介绍下如何使用
一、关于书写方面路由注册的时候由的Switch改为了Routes

//V5版本 import {Route, Switch} from 'react-router-dom'; ...... ...... //V6版本 import {Route, Routes } from 'react-router-dom'; ...... ......

不用Route标签包裹子组件，可以直接使用element属性，并且不需要exact来表示精准匹配，V6版本内部算法改变，它默认就是匹配完整路径，先后顺序不再重要，它能够自动找出最优匹配路径

//V5版本 import {Route, Switch} from 'react-router-dom'; //V6的版本 import {Route, Routes } from 'react-router-dom';

将Redirect改为Navigate

//路由配置中 //V5代码如下 import { Redirect } from 'react-router-dom'; //V6如下 import { Navigate } from 'react-router-dom'; } />//组件内部 //V5版本 import { Redirect } from 'react-router-dom'; //重定向到首页 return //V6版本 import { Navigate } from 'react-router-dom'; //重定向到首页 return

用useNavigate替代useHistory使用

import {useNavigate} from 'react-router-dom'; const navigate = useNavigate(); //如去首页 navigate("/home"); //还可使用 navigate(-1); //后退到前一页 navigate(-2); //后退到前两页的前一页， navigate(1); //前向导航等等依此类推

二、路由的嵌套方面优化使用 Outlet 组件，此组件是一个占位符，告诉 React Router 嵌套的内容应该放到哪里。

//路由中 } //User组件中 import {Outlet} from 'react-router-dom'; const User = () => { return 我是外容器 } export default User;

三、关于路由的灵活配置化可以通过API useRoutes读取一个路由配置数组，生成相应的路由组件列表,来实现路由配置化，
并且可以在路由配置中带 meta属性，增加其他配置化信息，如路由图标，是否需要登录等其他信息

import { useRoutes } from 'react-router-dom'; export const routes = [ { path: '/', element: , children: [ { path: 'home', meta: { title: '首页', icon: , }, children: [ { path: 'application', element: , meta: { title: '应用', } } ] }, { path: 'setting', element: , meta: { title: '设置', icon: ,//图表名称 } } ] }, { path: '/login', element: , meta: { title: '登录', noLogin: true, hideMenu: true } }, { path: '*', element: , meta: { title: '404', noLogin: true, hideMenu: true } }, ]; const Routes = () => ( useRoutes(routes) ) export default Routes;

四、关于路由鉴权方面 【react.js|react-router-dom V6的配置使用】此处就不过多的概述，只是做个简单的登录校验的实例，每个项目的关于鉴权方式都不一样，可以结合上方第三点中 meta信息去自行实现，

const onRouteBefore = ({ pathname, meta }) => { // 动态修改页面title if (meta.title !== undefined) { document.title = meta.title } // 判断未登录跳转登录页 if (!meta.noLogin) { if (!isLogin) { return '/login' } } }

最后如果你是前端工程师同学，对前端监控搭建感兴趣，欢迎试用体验【webfunny监控系统】。