做公司网站联系公司,南昌地宝网首页,网页制作怎么插视频,南昌哪个网站建设比较好本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))
喜欢的话点个赞,谢谢!
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路由其实就是在写组件
