网站 空间 备案,软文兼职10元一篇,浙江省网站建设,最值钱的域名列表Hello#xff01;大家好#xff0c;今天带来的是React前端JS库的学习#xff0c;课程来自黑马的往期课程#xff0c;具体连接地址我也没有找到#xff0c;大家可以广搜巡查一下#xff0c;但是总体来说#xff0c;这套课程教学质量非常高#xff0c;每个知识点都有一个… Hello大家好今天带来的是React前端JS库的学习课程来自黑马的往期课程具体连接地址我也没有找到大家可以广搜巡查一下但是总体来说这套课程教学质量非常高每个知识点都有一个小案例最后有一个总的美团外卖案例教学大家可以看看我这篇文章如果能够帮到你们还请多多点赞o(▽)支持支持如果文章中有错误的或者是遗漏信息可以在评论区指出或者是与我私信。我看到了消息一定会及时更正过来∠(°ゝ°)。话不多说直接开学⛽️。 本篇教学已完结具体可查看教程 1. 一天搞定React1——React安装与配置 2. 一天搞定React2——JSX语法 3. 一天搞定React3——Hoots组件 4. 一天搞定React4——Redux 5. 一天搞定Recat5——ReactRouter上 6. 一天搞定React5——ReactRouter下 文章目录 ReactRouter搭建路由环境路由基础路由导航声明式导航编程式导航导航传参searchParams传参params传参 ReactRouter
前端路由一个路径path对应一个组件component当我们在浏览器中访问一个path的时候path对应的组件会在页面中进行渲染。
搭建路由环境
使用路由我们还是采用CRA创建项目的方式进行基础环境配置。 创建项目并安装所有依赖 npx create-react-app 项目名称安装最新的ReactRouter包 npm i react-router-dom启动项目 npm run start路由基础 在src文件夹下新建一个page文件夹里面创建组件一文件夹和组件二文件夹来代表两个页面。然后在这两个文件夹里面分别创建index.js用来编写代码 新增一个router模块里面创建一个index.js之后导入上面创建的两个模块。还需要导入createBrowserRouter工具。 import 组件一 from /路径
import 组件二 from /路径
import {createBrowserRouter,RouterProvider} from react-router-dom创建router实例对象并且配置路由对应关系 const router createBrowserRouter([{path:/第一个页面名称,element:组件一 /},{path:/第二个页面名称,element:组件二 /},
])来到index.js入口文件实现路由绑定 //首先导入路由
import router from ./路由文件路径
//导入RouterProvider
import {RouterProvider} from react-router-domroot.render(React.StrictModeRouterProvider router {router}/RouterProvider/React.StrictMode
)路由导航
路由系统中的多个路由之间需要进行路由跳转并且在跳转的同时有可能需要传递参数进行通信。
React导航又分为两种一种是声明式导航一种是编程式导航。
声明式导航
声明式导航是指通过在模版中通过^组件描述出要跳转到哪里去比如后台管理系统的左侧菜单通常使用这种方式进行。
import {Link} from react-router-dom
Link to /要跳转的组件路径 内容 /Link语法说明通过给组件的to属性指定要跳转到路由path组件会被渲染为浏览器支持的a链接如果需要传参直接通过字符串拼接的方式拼接参数即可。
编程式导航
编程式导航是指通过useNavigate钩子得到导航方法然后通过调用方法以命令式的形式进行路由跳转比如想在登录请求完毕之后跳转就可以选择这种方式更加灵活。
import {useNavigate} from react-router-dom//在组件里面执行useNavigate()
const 组件名 () {const navigate useNavigate()return(div标签名 事件{() navigate(/要跳转的组件路径)}内容/标签名/div)
}语法说明通过调用navigate方法传入地址path实现跳转 注: 如果在跳转时不想添加历史记录可以添加额外参数replace 为true navigate(/要跳转的组件路径, { replace: true } )导航传参
searchParams传参
searchParams 是指URL的查询字符串部分通常用于过滤、分页等操作。
参数跟在?符号后面多个参数之间用连接。参数不是URL路径的一部分因此不会影响路由匹配。 路由传参 navigate(/要跳转的组件路径?属性名属性值)来到目标路由获取传递过来的参数 const [params] useSearchParams()
const 属性名 params.get(属性名)params传参
在Web开发中params通常指的是路由参数它是URL路径的一部分用于传递数据到服务器端。 设置路由传递参数 navigate(/要跳转的组件路径/属性值)来到配置router的文件下加上一个占位符 const router createBrowserRouter([{path:/第一个页面名称/:属性值, //添加 /:属性值element:组件一 /},
])来到目标路由获取传递过来的参数 const params useParams()
const 属性名 params.属性名
