网站跟自媒体建设,广州白云网站建设,学生个人网页设计主题,如何设计网站后台react路由
现代的前端应用大多都是 SPA#xff08;单页应用程序#xff09;#xff0c;也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小#xff0c;所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能#xff0c;前端路由应运而…react路由
现代的前端应用大多都是 SPA单页应用程序也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能前端路由应运而生前端路由是一套映射规则在React中是 URL路径 与 组件 的对应关系
react-router-dom
React实现页面路由的模块react-router-dom
路由器组件 HashRouter BrowserRouter
HashRouter hash模式全局路由切换 BrowserRouter history模式单页面的路由切换 hash 路由和 history 路由的区别 原理不同 hash 路由是通过监听 hashChange 事件实现history路由是通过 调用 history.pushState 方法 和监听 popState 事件实现表现方式不同hash 路由前面带 # history路由没有history路由在页面刷新的时候可能会有白屏的情况因为刷新后浏览器会向服务器发送这个地址的请求但文件资源并不存在会报404错误需要后端做一个保底映射所有的请求全部拦截到index.html上。 使用方式
//例如
import {// HashRouter as Router, // hash模式BrowserRouter as Router, // history模式Route,Switch,} from react-router-domimport Home from ../containers/homeconst BasicRouter () (RouterSwitchRoute exact path/ component{Home} //Switch/Router)export default BasicRouterRoute 标签定义具体组件
语法
//v5版本
Route path/xx/xx component{组件}/Route
//v6:
Route path/xx/xx element{组件名/}/v5以及其他老版本 当路由为 / 时默认模糊匹配这样可能会存在匹配到多个的问题用 Switch 标签包裹之后按顺序 自上而下 匹配exact 属性可以设置为精准匹配 v6版本 默认 精准匹配匹配完整路径不需要Switch 标签、exact 属性若要匹配某一部分则在路径后面加 /*可以将path 设置为 *用于实现 404页面
Link 标签、NavLink标签
类似 a 标签用于跳转NavLink:可以设置激活状态的样式 老版本可以通过 activeClassName 或 activeStyle 设置v6可以通关箭头函数 接收isActive
Navigate 组件
用于重定向老版本Redirect 标签重定向 import { Navigate } from react-router-dom;function A() {return Navigate to/b /;}
## useNavigate 编程式路由跳转可以通过 JS 代码完成路由跳转useNavigate取代了原先版本中的useHistory可以直接传入要跳转的目标路由
jsimport { useNavigate } from react-router-dom;function Foo(){const navigate useNavigate();return (// 上一个路径/a 当前路径 /a/a1div onClick{() navigate(/b)}跳转到/b/divdiv onClick{() navigate(a11)}跳转到/a/a1/a11/divdiv onClick{() navigate(../a2)}跳转到/a/a2/divdiv onClick{() navigate(-1)}跳转到/a/div)}动态路由参数
useParams 获取路径参数
在Route组件中的path属性中定义路径参数在组件内通过useParams hook 访问路径参数 BrowserRouterRoutesRoute path/foo/:id element{Foo /} //Routes/BrowserRouter;import { useParams } from react-router-dom;export default function Foo() {const params useParams();return (divh1{params.id}/h1/div);}useSearchParams 访问和修改查询参数
使用 useSearchParams hook 来访问和修改查询参数。其用法和 useState 类似会返回当前对象和更改它的方法使用 setSearchParams 时必须传入所有的查询参数否则会覆盖已有参数 import { useSearchParams } from react-router-dom;// 当前路径为 /foo?id12function Foo() {const [searchParams, setSearchParams] useSearchParams();console.log(searchParams.get(id)); // 12setSearchParams({name: foo,}); // /foo?namefooreturn divfoo/div;}路径匹配规则
当URL同时匹配到含有路径参数的路径和无参数路径时优先匹配没有参数的”具体的“specific路径。
Route pathteams/:teamId element{Team /} /
Route pathteams/new element{NewTeamForm /} /
//如上的两个路径将会匹配 teams/newHistory 对象
