盐城网站建设方案,房管局官网,wordpress狮子歌歌,开发网站需要时间一、react路由环境安装
使用指令#xff1a;npm i --save react-router-dom type/react-router-dom进行react路由环境安装
二、引入路由
在main.jsx文件中引入该语句#xff1a;
import { createBrowserRouter, RouterProvider } from react-router-dom
定义一个变量rou…一、react路由环境安装
使用指令npm i --save react-router-dom type/react-router-dom进行react路由环境安装
二、引入路由
在main.jsx文件中引入该语句
import { createBrowserRouter, RouterProvider } from react-router-dom
定义一个变量router来接收createBrowserRouter【】”【】“里面是每个路由 的path路径当访问的是path里的路径时则访问element的组件。
// 使用高阶组件若要进行页面之间的跳转必须使用suspense标签将其组件括起来不然的话会报错嘞 1.最简单的写法 let router createBrowserRouter([{
//页面访问的路径path: /home,
//访问path路径时页面显示element里的组件element: div首页页面/div},{path: /user,element: div用户页面/div},{path: /login,element: div登录呀呀呀/div},])
2.进阶版一访问相应的path页面若要跳转到自己封装的组件
需要使用到高阶组件
如代码中load返回的是一个com/组件然后element中使用该高阶组件进行懒加载引入要访问的组件路径。即可 3.最终版也是代码比较少的一种写法
import ReactDOM from react-dom/client
import { createBrowserRouter, RouterProvider } from react-router-dom
// 将path传进去
let load (path) {// 使用高阶组件若要进行页面之间的跳转必须使用suspense标签将其组件括起来不然的话会报错嘞let Comp React.lazy(() import(path))return (React.SuspenseComp/Comp/React.Suspense)
}
let router createBrowserRouter([{path: /home,element: load(./component/01-son.jsx)},{path: /granson,element: load(./component/hook/02-granSon)}])
ReactDOM.createRoot(document.getElementById(root)).render(// 在根组件中使用RouterProvider来提供路由功能RouterProvider router{router}/RouterProvider
)
三、页面之间跳转无参跳转
1.1Link标签和a标签的区别
两者都可以链接到网络地址
前者当链接到当前项目中的路由的地址的话不会刷新当前的网址只是刷新当前的组件
后者链接到当前项目中的路由的地址的话刷新的话当前网址会重新加载页面重新刷新
1.利用link标签进行跳转
//son页面import React, { useState } from react
import { Link } from react-router-dom
function Son() {return (divh2son页面/h2{/* 使用link进行专拣之间的跳转减少了页面刷新的次数 */}Link to/granson跳转到granson页面/Linkbr ///link标签跳转的第二种写法to里面是两个花括号*****************************Link to{{ pathname: /granson }}跳转/Linkbr /{/* a标签也可以实现页面跳转但页面每次刷新都会重新加载页面 */}a href/gransona标签跳转/abr /Link tohttp://www.baidu.comlink链接到百度地址/Linkbr /a hrefhttp://www.baidu.coma链接到百度地址/a/div)}
export default Son//granson页面import React, { useContext } from react
function Grandson() {return (divh5Grandson页面/h5/div)
}
export default Grandson
2.用编程式写法进行页面之间的跳转 代码中有编程式写法进行页面跳转的两种方式
import React, { useState } from react
import { useNavigate } from react-router-dom
function Son() {// 定义一个变量来接收刚刚引进来的函数let router useNavigate()// 点击按钮router就去匹配相对应的组件进行跳转// 编程式写法的第一种写法function tiaozhuan() {router(/granson)}// 编程式写法的第二种写法function tiao() {router({ pathname: /granson })}return (divh2son页面/h2button onClick{tiaozhuan}点击跳转到granson页面/buttonbr /br /button onClick{tiao}点击跳转到granson页面/button/div)}
export default Son
四、页面之间跳转有参跳转 1.state传参常用
使用编程式写法来进行传参1.引入useNavitage函数 2.给定一个假的数据obj 3.定义一个变量来接收刚刚引入的useNavitage 4.useNavitage的两个参数1要跳转的页面路径 2state是要传递的数据 跳转后的页面若要使用从前面传递过来的数据则需要引入useLocation 5.用一个变量来接收引入的useLocation函数 7.在控制台打印即可在state里面找到从前面传递过来的数据并且可以在该页面正常使用。
//son组件中import React, { useState } from react
import { useNavigate } from react-router-dom
function Son() {let [obj, setobj] useState([{ id: 1, name: 衣服, price: 125元, comment: 质量挺好好哈 },{ id: 2, name: 裤子, price: 133元, comment: 真棒呀 },{ id: 3, name: 鞋子, price: 232元, comment: 不错哦 }])let navigate useNavigate()console.log(obj);function change(id) {console.log(id);// 使用navigate实现页面跳转state来进行传递参数这里是将id传递过去navigate({ pathname: /granson }, { state: { id } })}return (divh2son页面/h2div{obj.map(el div key{el.id}div{el.name}/divdiv{el.price}/divdiv{el.comment}/div{/* 点击button传递相应的参数id传递给change函数 */}button onClick{() { change(el.id) }}点击跳转到granson页面/button/div)}/div/div)}
export default Son//granson组件中import React, { useContext } from react
// 1.1在组件页面需要引入uselocation
import { useLocation } from react-router-dom
function Grandson() {//1.2 用一个变量来接收uselocation函数let obj useLocation()// 在控制台的state中可以看到从son组件中传递过来的id和obj数据console.log(obj);return (divh5Grandson页面/h5div{obj.state.id}/div{/* 在granson页面可以正常使用 */}div{obj.state.obj[0].name}/div/div)
}
export default Grandson 2.query传参 1.引入useNavitage 2.定义一个变量来接收刚刚引入的useNavitage 3.useNavitage的两个参数1要跳转的页面路径 2search是要传递的数据 跳转后的页面若要查看从前面传递过来的数据则需要引入useLocation 4.用一个变量来接收引入的useLocation函数 7.在控制台打印即可在search里面看到到从前面传递过来的数据但不能直接取出来使用需要自己去处理后才能正常使用
/son组件中import React, { useState } from react
import { useNavigate } from react-router-dom
function Son() {let [obj, setobj] useState([{ id: 1, name: 衣服, price: 125元, comment: 质量挺好好哈 },{ id: 2, name: 裤子, price: 133元, comment: 真棒呀 },{ id: 3, name: 鞋子, price: 232元, comment: 不错哦 }])let navigate useNavigate()console.log(obj);function change(id) {console.log(id);// 使用navigate实现页面跳转search来进行传递参数navigate({ pathname: /granson, search: id32name衣服 })}return (divh2son页面/h2div{obj.map(el div key{el.id}div{el.name}/divdiv{el.price}/divdiv{el.comment}/div{/* 点击button传递相应的参数id传递给change函数 */}button onClick{() { change(el.id) }}点击跳转到granson页面/button/div)}/div/div)}
export default Son//granson组件中import React, { useContext } from react
// 1.1在组件页面需要引入uselocation
import { useLocation } from react-router-dom
function Grandson() {//1.2 用一个变量来接收uselocation函数let obj useLocation()// 在控制台的state中的search可以看到传递过来的数据但不能直接使用需要自己进一步处理后再使用console.log(obj);return (divh5Grandson页面/h5/div)
}
export default Grandsonstate和query传参两者的区别前者是传递过去了那边直接可以使用后者是传递过去的数据需要自己进一步处理后才能使用。 3.动态路由传参
granson路由部分{path: /granson/:dt,element: load(./component/hook/02-granSon)}//son组件部分import React, { useState } from react
import { useNavigate } from react-router-dom
function Son() {let navigate useNavigate()function change() {// 在后面的控制台中的pathname中可以看到/granson/2023这个数据navigate({ pathname: /granson/2023 })}return (divh2son页面/h2button onClick{change}点击跳转到granson页面/button/div)
}
export default Son//granson组件组分
import React, { useContext } from react
// 1.1在组件页面需要引入uselocation
import { useLocation } from react-router-dom
function Grandson() {//1.2 用一个变量来接收uselocation函数let obj useLocation()console.log(obj);return (divh5Grandson页面/h5/div)
}
export default Grandson
57行中传递了一个参数。
