手撸react路由

最新推荐文章于 2024-04-29 09:13:27 发布
最新推荐文章于 2024-04-29 09:13:27 发布
阅读量303 收藏
点赞数
分类专栏： React 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41910103/article/details/121691765
版权

前端路由
后端路由

路由的原理 ：history BOM

react路由 官方插件库
脚手架默认是不会进行安装的
react-router-dom

npm i react-router-dom

tips：一个项目安装包依赖的时候要么用npm 要么用yarn
不能混着用
安装：

一般组件和路由组件的区别
在这里插入图片描述

常见的组件

使用路由组件

Link 属性to 属性replace
NavLink 属性to 属性activaClassName

注册路由组件

switch
Router 属性exact 属性path 属性component
V6 版本 Router 属性exact 属性path 属性element <About/>
Routers
Redirect 属性to
BrowserRouter HashRouter

路由匹配的时候默认是模糊匹配

函数组件

withRouter 让一般组件拥有路由组件的特性!

解决多级路由刷新时CSS样式丢失的问题：
不写相对路径

通过路由传递组件间的信息

params参数

传参
在这里插入图片描述

接参
在这里插入图片描述

用参
在这里插入图片描述

search参数

传参
在这里插入图片描述

接参
在这里插入图片描述

用参
在这里插入图片描述

state参数

传参
在这里插入图片描述

接参
在这里插入图片描述

用参

在这里插入图片描述

编程式路由

在这里插入图片描述
在这里插入图片描述
通过history APi
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如何让一般组件也用上路由的API
在这里插入图片描述
在这里插入图片描述

黑瞳丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react路由配置方式详解
08-29
本篇文章主要介绍了react路由配置方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue面试题总结06
m0_64526818的博客
03-02 741
请说出路由配置项常用的属性及作用 编程式导航使用的方法以及常用的方法 Vue如何去除URL中的# 说一下你在vue中踩过的坑 $route和$router的区别？ 跟keep-alive有关的生命周期是哪些？
【react】配置路由
Aguai229的博客
07-29 1139
首先在src的同级目录下创建config文件夹，在文件中创建文件config.js文件在config.js文件中对路由进行配置。
react-router路由配置
前端技术的学习整理
05-21 6745
vue路由传参，路由配置const RouteConfig = [ { path: 'first', component: First, name: '第一个路由', routes: [ { path: '1', component: Ch...
前端也学一下 Lua 呀
发果叁
11-14 710
module = {} -- 定义一个modulereturn module -- 返回一个 module为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
手把手撸 React
不见浅诗的博客
02-22 474
本篇文章参考以下博文 Build-your-own-react React技术揭秘 文章目录前言准备：Review第一步：creatElement Function第二步：The render Function第三步：Concurrent Mode第四步：Fibers 前言   本篇文章带大家一起认识一下 React 的实现原理，然后实现一个小型 React 库。   如果是刚刚接触 React 的同学，不建议直接阅读，文中很多专业名词需要在会使用的基础上再加以理解，如
React路由鉴权的实现方法
10-16
主要介绍了React路由鉴权的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React路由管理之React Router总结
08-27
React项目通常都有很多的URL需要管理，最常使用的解决方案就是React Router了，本篇文章主要介绍了React路由管理之React Router总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native路由总结
01-20
安装 npm install @react-navigation/native npm install @react-navigation/stack ...npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-con
自己撸一个react
qq_42975676的博客
05-25 233
/** * * @param {str|function} 类型，是字符串div 还是函数 * @param {*} jsx传递的属性 * @param {...any} 子元素 */ function createElement(type, props, ...children) { delete props.__source return { type, props: { ...props, children: children.m..
徒手撸个react项目框架（上）
萌萌哒草头将军
07-05 311
最近学习react.js，发现项目框架除了使用的js库不同（vue.js、react.js），配置基本上是大同小异的 徒手撸个vue项目框架（上） 徒手撸个vue项目框架（下） 徒手撸个react项目框架（上） 徒手撸个react项目框架（下） 一、准备工作 1.新建vueProject文件夹 进入根目录,初始化项目 cd vueProject npm init -y // -y是采用默认配置 ...
面试还问redux？那我从头手撸源码吧（核心代码）
weixin_34234829的博客
10-22 175
最近处在项目的间歇期，没事参加了几场面试发现面试官依然喜欢问redux的一些问题，尤其是问这种开发框架的问题最好的办法就是撤底搞懂其源码，正好利用这两天时间从头过了一遍redux库，还是有些收获的。 redux源码我大致分了3块，从易到难： 状态管理核心代码 react-redux库 中间件 手写源码不是目的，主要是为了看看大牛写的代码更能开拓思维，以后和面试官扯淡的时候能把他忽悠住。 下面从...
【React进阶-1】从0搭建一个完整的React项目（入门篇）
热门推荐
jsjxxx的博客
06-29 1万+
这篇文章带领大家从零开始手动撸一个React项目的基础框架，集成React全家桶。万字长文，请各位有足够的时间时再来阅读和学习。概述 平时工作中一直在用React提供的脚手架工具搭建React项目，一行命令全都搞定，自己只管做需求开发即可，从来没仔细研究过各个模块代码怎么去配置，相互之间怎么去进行交互。这周正好有时间，所以决定仔细研究下React项目中的各个功能模块，所以我们来讲解下如何从零搭建一个完整的React项目。目录 项目初始化 安装NodeJS环境和初始化项目安装webpack新建项目目录和文件
亲手撸一个React（一）：JSX与虚拟DOM
weixin_33686714的博客
05-11 200
前言 react的火热程度已经达到了94.5k个start，本系列文章主要用简单的代码来实现一个react，来了解JSX、虚拟DOM、diff算法以及state和setState的设计。 提到react，当然少不了vue，vue的api设计十分简单 上手也非常容易，但黑魔法很多，使用起来有点虚， 而react没有过多的api，它的深度体现...
手撸一个 MVVM 不是梦
weixin_33840661的博客
06-30 206
在实现 VUE 中 MVVM 的系列文章的最后一篇文章中说道：我觉得可响应的数据结构作用很大，在整理了一段时间后，这是我们的最终产出：RD - Reactive Data ok 回到整理，这篇文章我们不研究Vue了，而是根据我们现在的研究成果来手撸一个MVVM。 简单介绍 RD 先看看下我们的研究成果：一个例子 let demo = new RD...
基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式
weixin_34041003的博客
12-20 173
这两天看了下react的文档，准备搭建一套适用的基本react开发架子。由于我一直使用的是vue，很少使用过react进行项目的开发，因此此构建主要参考的是vue的项目经验。项目主要会涉及到的知识点 webpack 配置及其优化react-router 升级为4.0之后的使用 react-router-dom react-router-configreact-router 异步4种异步加载配置项目...
React vs React Native写法上的不同
Ranye的博客
04-23 665
从标签和样式两个角度，快速从react过渡到react native
vue3中的reactive、readonly和shallowReactive
最新发布
weixin_43784341的博客
04-29 365
这些函数提供了不同级别的响应式对象，你可以根据需求选择合适的函数来创建对象。在实际应用中，你可以将这些响应式对象用于组件的状态管理、数据传递等场景，从而实现更加灵活和高效的 Vue 应用程序。是用于创建响应式对象的函数，它们可以帮助管理组件状态和数据流。在 Vue 3 中，
react实现时钟翻牌效果
qq_39933787的博客
04-24 313
解决方案：通过判断数字改变（这里通过新旧数值变动来判断，不贴代码啦），每次变动的时候手动把animationIterationCount设置为infinite（持续动画），半秒后改为1（动画只执行一次），需求：随着数字的变动要求有时钟翻动动效。问题：只在加载时有动效。
react路由哈希路由
03-31
React路由有两种主要的路由方式：哈希路由和浏览器路由。 哈希路由是指在URL中使用#符号，例如：`http://example.com/#/home`。这种方式的好处是可以避免页面刷新，因为每次URL的改变只会触发hashchange事件，而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑瞳丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值