本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))
喜欢的话点个赞,谢谢!
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 = false
return (
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路由其实就是在写组件
