网站网站二维码收钱怎么做的,可视化开发,seo优化技术厂家,微网站建设及微信推广方案Router5和Router6的变化
部分标签产生了变化#xff0c;之前的标签都有了替#xff08;主要集中在Route匹配上#xff09;#xff0c;所以这里先回顾一下Router5#xff0c;同时引出Router6的一些新特性
其次#xff0c;React官方在推出Router6之后#xff0c;就明确推…Router5和Router6的变化
部分标签产生了变化之前的标签都有了替主要集中在Route匹配上所以这里先回顾一下Router5同时引出Router6的一些新特性
其次React官方在推出Router6之后就明确推荐函数式组件了
破坏性变更1废弃 Switch 组件由 Routes 代替使用了智能匹配路径算法
注意Routes/组件里面只接收Route/标签其他的标签放进去一律报错
之前的Switch/标签主要是用于解决同路径匹配问题类似case穿透的问题
Route path/about component{About}/Route
Route path/home component{Home}/Route
Route path/home component{Test}/Route这是两个路由组件在23行中我们同时使用了相同的路径 /home此时因为没有Switch/标签就会出现类似case穿透的现象匹配到了一个之后还会继续向下匹配所以就会出现所有匹配上路径的标签都会被显示出来 以上就是Router5版本中Switch/标签的作用 在Router6版本中Switch/标签被废除引入了Routes/标签作为他的替代 Switch/标签是可选项不选顶多会被多匹配路径 到了Routes/就是必选项如果不套上标签就会报错 修改之后
RoutesRoute path/about element{Abouts /} /Route path/home element{Home /} /Route path/home component{Test} /
/RoutesRoutes 和 Route要配合使用且必须要用Routes包裹Route。Route 相当于一个 if 语句如果其路径与当前 URL 匹配则呈现其对应的组件。Route caseSensitive 属性用于指定匹配时是否区分大小写默认为 false不区分大小写。当URL发生变化时Routes都会查看其所有子Route 元素以找到最佳匹配并呈现组件单一匹配匹配上一个就不会往下匹配 。Route 也可以嵌套使用且可配合useRoutes()配置 “路由表” 但需要通过 Outlet 组件来渲染其子路由。破坏性变更2Route标签废弃component属性改用element
注意是element不是elements因为每个Route标签只匹配一个路由的标签所以单数的element即可
V5版本匹配组件的属性为component{组件}
SwitchRoute path/about component{About} /Route path/home component{Home} /
/SwitchV6版本匹配组件的属性替换成element{组件}
RoutesRoute path/about element{Abouts /} /Route path/home element{Home /} /
/Routes破坏性变更3废弃Redirect由Navigate代替
之前作为路由的兜底路径匹配输入一个不在Route注册的路径就会被兜底路径兜住在Router6中Redirect/标签被删除改用Navigate/标签替代。但注意Navigate/标签不可以直接暴露在Routes/标签里。否则就会报错也就是Routes/组件只接收Route/作为其子组件。其他组件放进去一律报错。
将Navigate组件定义在Route/组件的element属性中因为星号的匹配规则定义在所有路由的最后所以只有前面的路由都没有匹配时才会命中相当于兜底而Navigate/组件做的事很简单就是把错误的路由重定向到一个指定的路径上Route只管匹配剩下的事交给element属性里的Navigate/来做
Navigate/组件属性 Navigate to/home replace / to代表重定向的路径或组件即[ to/home或to{Home}] 二者均可且to这个属性是Navigate的必须属性必须写上去。replace代表对浏览器history的操作是replace而不是push操作。但具体用不用要看是否想前进后退按钮亮起。
注意只要Navigate/这个标签渲染了就会生效去重定向 在Route上使用的例子 Navigate/重定向到某个组件 RoutesRoute path/about element{Abouts /} /Route path/home element{Home /} /{/* path*代表可以匹配任何路径to代表目标[可传组件或者路径]replace代表浏览器历史记录栈顶替换 */}Route path* element{Navigate to{Home} replace /} //RoutesNavigate/重定向到某个路径兜底使其回正到/home路径上就可以走正常路由了 RoutesRoute path/about element{Abouts /} /Route path/home element{Home /} /{/* path*代表可以匹配任何路径to代表目标[可传组件或者路径]replace代表浏览器历史记录栈顶替换 */}Route path* element{Navigate to/home replace /} //Routes验证一下只要渲染Navigate/就生效的例子 在某个组件里定义一个变量当变量变为2时就会触发Navigate/标签渲染路由变更url变化完成页面迁移 App组件
import React from react;
import {Routes,Link,Route,Navigate,
} from react-router-dom;
import Home from ./components/Home/Home;
import About from ./components/About/About;export default function App() {return (divdivdiv classNamerowh2React Router Demo/h2/div/divdiv classNamerowLink classNamelist-group-item to/aboutAbout/LinkLink classNamelist-group-item to/homeHome/Linkdiv// 基础路由RoutesRoute path/about element{About /} /Route path/home element{Home /} /Route path/ element{Navigate to{/about} /} //Routes/div/div/div);
}About组件
import React from react;
import { Navigate } from react-router-dom;export default function About() {const [count, setCount] React.useState(1);return (divAbout组件当前值{count}{/* 判读是否为2为2就渲染Navigate组件并且重定向到home上 */}{count 2 ? Navigate to{/home} / : h1/h1}br/brbuttononClick{() {setCount(2);}}点击变成2/button/div);
}Home组件
export default function Home() {return divHome/div;
}破坏性变更4使用 useNavigate 代替 useHistory
这是第三个破坏性变更废弃useHistory由useNavigate代替。这个属于Hooks的范畴会在新增特性里面详细说明
v6 版本写法
const App () {const navigate useNavigate();const handleClick () {navigate(/home);};return (divbutton onClick{handleClick}返回首页/button/div);
};对比于之前操作history对象的写法变更
history.push(/) navigate(/)
history.replace(/) navigate(/,{ replace: true })
history.goBack() navigate(-1)
history.goForward() navigate(1)
history.go(2) navigate(2)另外navigate 还支持与 Link 相同的相对路径写法
总结一下Routes/ 与 Route/ v6版本中移出了先前的Switch引入了新的替代者Routes。 Routes 和 Route要配合使用且必须要用Routes包裹Route。 Route 相当于一个 if 语句如果其路径与当前 URL 匹配则呈现其对应的组件。 Route caseSensitive 属性用于指定匹配时是否区分大小写默认为 false。 当URL发生变化时Routes 都会查看其所有子 Route 元素以找到最佳匹配并呈现组件 。 Route 也可以嵌套使用且可配合useRoutes()配置 “路由表” 但需要通过 Outlet 组件来渲染其子路由。 示例代码 这里使用Route标签实现的嵌套后面会用路由表来做路由嵌套更加推荐用路由表去左路由嵌套
Routes/*path属性用于定义路径element属性用于定义当前路径所对应的组件*/Route path/login element{Login /}/Route/*用于定义嵌套路由home是一级路由对应的路径/home*/Route pathhome element{Home /}/*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/Route pathtest1 element{Test/}/RouteRoute pathtest2 element{Test2/}/Route/Route//Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxxRoute pathusersRoute pathxxx element{Demo /} //Route
/RoutesRouter6新增特性
NavLink样式更新 作用: 与Link组件类似且可实现导航的“高亮”效果。 示例代码
// 注意: NavLink默认类名是active下面是指定自定义的class//自定义样式
NavLinktologinclassName{({ isActive }) {console.log(home, isActive)return isActive ? base one : base}}
login/NavLink/*如果是子NavLink亮起的时候不希望父NavLink亮起就可以加一个end属性来阻止父NavLink的亮起默认情况下当Home的子组件匹配成功Home的导航也会高亮当NavLink上添加了end属性后若Home的子组件匹配成功则Home的导航没有高亮效果。
*/
NavLink tohome end home/NavLinkuseRoutes路由表
简单来说就是把路由定义在外部文件这个文件里定义了路由的path以及对应的组件显示element
一般来说我们把这个路由定义在route目录下并且命名index.js。也就是route/index.js 注意路径写法 path有几种写法
“/路径” 这是绝对路径无论之前是否有父级目录路径当前路径都直接作为绝对路径“./路径” 这是相对路径相对于当前父级目录下再追加一个子路径“路径” 只单写一个路径和相对路径的效果是一样的 路由表
import About from ../components/About/About;
import Home from ../components/Home/Home;
import { Navigate } from react-router-dom;export default [{path: /about,element: About/About,},{ path: /home, element: Home/Home},{path: *,// 重定向通配符如果匹配不到就走这个element: Navigate to/home/Navigate,},
];在组件里使用路由表来替代路由路由本身就不是显示在页面上的而是隐藏等待匹配的
import React from react;
import { Routes, useRoutes, Link, Route, Navigate } from react-router-dom;
// 导入路由表
import routes from ./route;export default function App() {// 解构出路由表根据路由表生成对应的路由const element useRoutes(routes);return (divdivdiv classNamerowh2React Router Demo/h2/div/divdiv classNamerowLink to/aboutAbout/LinkLink to/homeHome/Linkdiv{/* 使用路由表被解析成a标签 */}{element}{console.log(element)}/div/div/div);
}嵌套路由
所谓嵌套路由就是在路由表里面加一层children属性使url完成嵌套的操作使其完成二级甚至n级路由的匹配
//根据路由表生成对应的路由规则
export default [{path: /about,element: About /,},{path: /home,element: Home /,children: [// 子路由{path: new,element: New /,children: [// 子路由当然还可以再套子路由{path: message,element: Message /,},],},],},{path: /,element: Navigate to/home /,},
];嵌套路由定位 Outlet
Outlet就是子路由组件渲染的槽位之前的一级路由因为有组件里有Route标签所以他就知道该去哪渲染。当父组件里没有写Route的位置就无法确定渲染该组件的位置此时就需要定位用的插槽标签 Outlet 。定位在 指定在子组件该呈现渲染的位置如果不写路由就不知道该渲染在哪
路由表定义home下有子路由new组件当匹配到home的子组件new之后就会去父组件home里去找子组件的槽位 Outlet并把子组件渲染到这个槽位上 路由表三级路由/home/new/message {path: /home,element: Home /,children: [// 子路由{path: new,element: New /,children: [{ path: message, element: Message / }],},],},子路由标签定义好槽位
import React from react;
import { Outlet } from react-router-dom;export default function Home() {return (h3我是Home的内容div// 这个槽位是匹配home的children子组件组件槽位:Outlet/Outlet/div/h3);
}// New组件
export default function New() {return (divNewdiv// 这个槽位是匹配New的children子组件组件插槽Outlet/Outlet/div/div);
}// Message组件
export default function Message() {return divMessage/div;
}params参数传递(useParams())
之前的获取params参数是通过const { id, title } this.props.match.params;类似这种方式获取参数。但对于函数式组件来说因为没有this对象了无法直接这么搞所以就专门为了函数式组件来获取路由参数搞了一个钩子 useParams() this.props.match.params这种获取方式后面有对应的Hooks来模拟不是说彻底就不要了只是更推荐useParams() 这里数据需要在路由里占位 定义路由表的路径比如detail/:id/:title/:title这个是和定义的子组件绑定 路由表
{path: /home,element: Home /,children: [// 子路由定义好参数占位这个参数是和Detail组件绑定的{path: detail/:id/:title/:content,element: Detail /,},],},Detail组件里
import React from react;
import { useParams } from react-router-dom;export default function Detail() {// useParams() param钩子在对应组件里面直接解构就能拿到url传递的参数// 因为我们之前就在路由表里已经定义好了所以可以直接匹配上const { id, title, content } useParams();console.log(id, title, content);return divDetail/div;
}打一个url
http://localhost:3000/home/detail/123/zhangsan/abcdef补充一个match的钩子
作用返回当前匹配信息对标5.x中的路由组件的match属性。 用得不多优势在于性能好这里了解即可
同样提供了钩子 useMatch(完整路径) 这个用的很少就是复刻match属性 要在对应组件里匹配到完整路径路径只用资源名即可useMatch(/home/detail/:id/:title/:content) 即可以获取到类似this.props.match.params
search参数传递useSearchParams()
search传递参数是从这种url里面拿数据 http://localhost:3000/home?id008title哈哈content嘻嘻
和上面的param一样之前的search传递参数是依靠于queryString的这种第三方库但是在Router6之后就引入了官方的参数解析钩子useSearchParams()
这个钩子一般这么实现 const [search, setSearch] useSearchParams()
常用的都是用search对象并且调用search身上的get方法来获取key
home组件内定义即可
import React from react;
import { useSearchParams } from react-router-dom;export default function Home() {// setSearch一般不用后面会介绍const [search, setSearch] useSearchParams();// 通过useSearchParams定义好的search来get(传入对应的key)const id search.get(id);const name search.get(title);const content search.get(content);return (divdivid:{id}/divdivname:{name}/divdivcontent:{content}/div/div);
}setSearch的参数没太大作用就是原地更新一下url重新触发一下钩子渲染
import React from react;
import { useSearchParams } from react-router-dom;export default function Home() {const [search, setSearch] useSearchParams();// 通过useSearchParams定义好的search来get(传入对应的key)const id search.get(id);const name search.get(title);const content search.get(content);return (divbutton onClick{() setSearch(id008title哈哈content嘻嘻)}点我更新一下收到的search参数/buttondivid:{id}/divdivname:{name}/divdivcontent:{content}/div/div);
} 路由的state参数(useLocation())
在router5中我们支持路由Link的state参数是这个样子的
到了Router6就换了一种写法分别影响Link和对应组件获取参数的方式
对于Link来说可以直接传递state属性了也就是和to拆开写了 Link to/home state{{ id: 123, age: 23, name: zhangsan1 }}Home/Link对于接收组件来说因为不能用this.props.location来获取所以只能通过useLocation()的钩子来获取location对象
// 钩子获取
const obj useLocation();
console.log(obj);例子代码
// App组件
Link to/home state{{ id: 123, age: 23, name: zhangsan1 }}Home
/Link// Home组件
const obj useLocation();
console.log(obj);
--- 或者也可以连续解构拿出来效果也一样更直接了 ---
const {state:{id,age,name}} useLocation();
console.log(id,age,name);编程式路由导航
在Router5中编程式路由导航的核心是this.props.history.xxx 对应的history对象提供了很多api
history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)但是在router6中因为没有this了所以就没办法再用这个api去实现编程式路由导航比如这种就实现不了 replaceShow (id, title) {// 这里注意用箭头函数向外扩散找this对象否则会造成死循环// 通过变更url传参return () this.props.history.push(/home/message/${id}/${title});};此时就需要用全新的钩子useNavigate 之前我们学过的 Navigate to/home replace /必须渲染了才能生效进行跳转也就是需要写在render里面。要不然不渲染就没法生效。
而编程式路由导航往往是定义在函数里也就是render以外的部分所以必须借助useNavigate钩子来操作
import React from react;export default function Message() {function testMethod() {// 编程式路由导航都是在这里写// 因为不再render里所以Navigate to/home replace /这种标签渲染的跳转不会生效}return (div我是Messagebutton onClick{testMethod}触发编程式路由导航/button/div);
}直接定义一个变量接收钩子的返回参数即可一般我们都叫做navigate 也就是const navigate useNavigate() 这里的navigate对象就是之前的history对象 可以对其进行操作
import React from react;
import { useNavigate } from react-router-dom;export default function Message() {const navigate useNavigate();function testMethod() {navigate(//目标跳转路径相对路径或者绝对路径都可以detail,{// 是否替换栈顶历史记录replace: false,// 给目标组件传递的数据这里key必须叫state(只能是传state参数组件里用useLocation()获取参数)state: {id: 123,name: jack,},});}return (div我是Messagebutton onClick{testMethod}触发编程式路由导航/button/div);
}// Detail组件注意要提前在路由表里注册好要不然跳转了找不到组件
export default function Detail() {// useLocation() Location钩子在对应组件里面解构就能拿到// 连续解构给state里的参数解出来const { state:{ id, name } } useLocation();console.log(id, name);return divDetail组件/div;
}或者我们也可以用这个对象来操作浏览器前进和后退和之前router5的操作差不多传入不同的参数前进或后退
export default function Header() {const navigate useNavigate()function back(){// 后退navigate(-1)}function forward(){// 前进navigate(1)}return (div classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2button onClick{back}←后退/buttonbutton onClick{forward}前进→/button/div/div)
}总结编程式路由导航
import React from react
import {useNavigate} from react-router-domexport default function Demo() {const navigate useNavigate()const handle () {//第一种使用方式指定具体的路径navigate(/login, {replace: false, // 是否替换historystate: {a:1, b:2} // 是否替换state}) //第二种使用方式传入数值进行前进或后退类似于5.x中的 history.go()方法navigate(-1)}return (divbutton onClick{handle}按钮/button/div)
}useInRouterContext()
作用如果组件在 Router 的上下文中呈现则 useInRouterContext 钩子返回 true否则返回 false。
说白了就是有没有被BrowserRouter或者HashRouter包裹如果被包裹了那这个钩子就true没有就flase const isInRouter useInRouterContext();这有啥用一般封装组件的场景就需要知道是否在路由环境下使用你的组件这个时候就需要判断一下了
useNavigationType()
作用返回当前的导航类型用户是如何来到当前页面的。返回值POP、PUSH、REPLACE。备注POP是指在浏览器中直接打开了这个路由组件刷新页面。PUSH、REPLACE这两种取决于路由Link是否开启了rplace属性。 const navigateType useNavigationType();useOutlet() 作用用来呈现当前组件中渲染的嵌套路由。就是判断Outlet/标签槽位上的目标组件有没有被渲染出来。 示例代码
const result useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象useResolvedPath()
作用给定一个 URL值解析其中的path、search、hash值。
// /后面是path?后面是search参数#后面是hash值
console.log(useResolvedPath(/user?id001namejack#qwer));
