做公司网站联系公司,wordpress从入门到精通pdf,深圳大梅沙,app开发长沙本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))
喜欢的话点个赞,谢谢!
React路由介绍
现在前端的项目一般都是SPA单页面应用,不再是以前多个页面多套HTML代码项目了,应用内的跳转不需要刷新页面就能完成页面跳转靠的就是路由系统
R…本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))
喜欢的话点个赞,谢谢!
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 (HashRouterRouterMap //HashRouter)
}
export default App
总结:React的路由可以管理整个React应用,并且只需要使用一次即可,React路由的一切展示都是组件,写React路由其实就是在写组件
