React路由(React笔记之五)

本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))

喜欢的话点个赞,谢谢!

React路由介绍

现在前端的项目一般都是SPA单页面应用,不再是以前多个页面多套HTML代码项目了,应用内的跳转不需要刷新页面就能完成页面跳转靠的就是路由系统

React路由主要有两种:

• BrowerRouter路由: 就像平常网站www.baidu.com/test 这就是一个路由

• HashRouter 路由: 比BrowerRouter多出了一个#符号,使用URL的哈希值实现,比如www.baidu.com/#/test

路由配置: createHashRouter或者createBrowserRouter二选一就可以,这里是为了显示效果

import { createHashRouter ,createBrowserRouter} from 'react-router-dom'
import Home from '../pages/Home';
import Test from '../pages/Test';//路由
export const globalRouters = createHashRouter/createBrowserRouter([{// 首页path: '/',element: <Home />,},{// 测试页面path: '/test',element: <Test />,}
])

BrowerRouter路由

路由是什么样的就是展示成什么样子,比如test页面

编辑

优点是路由所见即所得

缺点是在服务器渲染的时候需要后端坐映射:

nginx配置

location /web {try_files $uri /index.html;
}

否则的会显示找不到页面

编辑

HashRouter路由

HashRouter路由多了一个#分割域名和路由,这样的好处就是服务端渲染的时候不需要做任何配置,就可以直接显示页面:

编辑

所以我们一般开发通常采用HashRouter路由,这样不需要后端同学配置

React路由守卫

在vue里面通过router.beforeEach就可以直接拦截路由,比如用户登录失效之类的

router.beforeEach((to, _from) => {nprogress.start() // 开始加载进度条// 用户登录失效if (to.meta.requiresAuth && !store.state.login.UserInfo.name) {// 此路由需要授权，请检查是否已登录// 如果没有，则重定向到登录页面return {path: '/login',// 保存我们所在的位置，以便以后再来query: { redirect: to.fullPath }}}// 如果页面不存在if (!to.name && to.path !== '/404') {return {path: '/404'}}
})

但是我们React路由原生没有这个函数,所以需要自己处理拦截效果

以下是基于React Router V6 实现的一个简单的路由守卫校验

src/router/index.tsx文件

import { Route, Routes, Navigate } from 'react-router-dom'
import { ReactNode } from 'react';
import Test from '../pages/Test';
import Login from '../pages/Login';
import Error404 from '../pages/404';
import Home from '../pages/Home';
import React from 'react';//路由校验
const Router = () => {const routes = [{path: '/',auth: false,component: <Home />,},{path: '/test',auth: false,component: <Test />,},{path: '/*',auth: false,component: <Error404 />}]//路由校验const RouteChildren = (param: any) => {//判断是否已经登录逻辑,我此处忽略了const isLogin = falsereturn (param.map((item: { path: string, auth: boolean, component: ReactNode, child?: any }) => {return (<Route path={item.path} element={!isLogin ? <Navigate to='/login' replace={true}></Navigate> : item.component}key={item.path}>{item?.child && RouteChildren(item.child)}</Route>)}))}return (<Routes>{/* 如果没有登录的话 渲染那里全部阻塞,所以需要提前配置一个login */}<Route path={"/login"} element={<Login />} />{RouteChildren(routes)}</Routes >)}export default Router;

src/pages/index.tsx

import React from 'react';
// import './index.css';
import { HashRouter } from 'react-router-dom'
import RouterMap from '../router/index.tsx'
function App() {return (<HashRouter><RouterMap /></HashRouter>)
}
export default App

总结:React的路由可以管理整个React应用,并且只需要使用一次即可,React路由的一切展示都是组件,写React路由其实就是在写组件