浅谈react-router-dom V6的配置使用

metal 1年前 ⋅ 1000 阅读
ad

前言

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

V6的版本相对于V5,做了很多的优化,有书写方面的、路由的嵌套、路由配置化、鉴权方面等等,下面就简单的介绍下如何使用

 

一、关于书写方面

路由注册的时候由的Switch改为了Routes

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

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

//V5版本 
import {Route, Switch} from 'react-router-dom';
 
<div>
    <Switch>
        <Route exact  path="/">
            <Home />
        </Route>
    </Switch>
 </div>
//V6的版本
import {Route, Routes } from 'react-router-dom';
 
<div>
    <Routes >
        <Route path="/" element={<Home />} />
    </Routes>
 
 </div>

将Redirect改为Navigate

//路由配置中
//V5代码如下
import { Redirect } from 'react-router-dom';
<Redirect to="/home" />
//V6如下
import { Navigate } from 'react-router-dom';
<Route path="/" element ={<Navigate replace to="/home" />} />

//组件内部
//V5版本
import { Redirect } from 'react-router-dom';
//重定向到首页
return <Redirect to="/" />

//V6版本
import { Navigate } from 'react-router-dom';
//重定向到首页
return <Navigate to="/" />

用useNavigate替代useHistory使用

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

二、路由的嵌套方面优化

使用 Outlet 组件,此组件是一个占位符,告诉 React Router 嵌套的内容应该放到哪里。

//路由中
<Routes>
  <Route path='/user/*'  element={<User />} 
   	    <Route path='user-item' element={<div>我是嵌套子项</div>} />
  <Route/>
</Routes>

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

三、关于路由的灵活配置化

可以通过API useRoutes读取一个路由配置数组,生成相应的路由组件列表,来实现路由配置化,

并且可以在路由配置中带 meta属性,增加其他配置化信息,如路由图标,是否需要登录等其他信息

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

四、关于路由鉴权方面

此处就不过多的概述,只是做个简单的登录校验的实例,每个项目的关于鉴权方式都不一样,可以结合上方第三点中 meta信息去自行实现,

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

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 1   收藏 0
  • metal
    共发布7篇文章 获得0个收藏
全部评论: 0