百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

话说前端66-ui组件,路由(前端路由的两种模式)

toyiye 2024-07-04 09:08 13 浏览 0 评论

分享兴趣,传播快乐,增长见闻,留下美好!

亲爱的您,这里是LearningYard新学苑。

今天小编为大家带来知识集|网络营销(六),欢迎您的访问。

Share interests, spread happiness, increase knowledge, and leave a good legacy!Dear you, this is The LearningYard Academy.Today Xiaobian brings you the Knowledge Collection | Network Marketing (65), welcome to your visit.

?组件安装方法与过程:

Component installation method and process:

react-router:是路由的基本,就像路由器一样去管理网络及给每个接入进来的用户分发ip,是一个大容器 包裹着路由,HashRouter它是通过hash值来对路由进行控制。如果你使用HashRouter,你的路由就会默认有这个#。BrowerserRouter它的原理是使用HTML5 history API (pushState, replaceState, popState)来使你的内容随着url动态改变的,如果放在二级目录下给BrowerserRouter增加个属性。

React-router: It is the basis of routing, just like a router to manage the network and distribute ip to every incoming user. It is a big container that wraps the routing, and HashRouter controls the routing through the hash value. If you use HashRouter, your route will have this # by default. BrowserErrorIts principle is to use HTML5History API (Push State, Replace State, Pop State) to make your content dynamically change with the url. If you put it in the secondary directory, add an attribute to BrowerserRouter.

Route:控制路径对应显示的组件,标签属性有exact、path以及component,exact 是严格匹配,控制匹配到/路径时不会再继续向下匹配,path 是标识路由的路径,/path/:id路由参数,component 则表示路径对应显示的组件。

Route: the control path corresponds to the displayed component, and the label attributes are exact, path and component. exact is a strict match, and the control will not continue to match down when it matches/path. Path is the path that identifies the route, /path/:id is the routing parameter, and component indicates the component displayed correspondingly.

Link和NavLink?:两者都是可以控制路由跳转的,NavLink的api更多,Link标签有to属性,to可以接受string或者一个object,来控制url,NavLink它可以为当前选中的路由设置类名、样式以及回调函数等。

Link and NavLink: both of them can control the route jump. NavLink has more APIs, and the Link tag has to attribute. to can accept string or an object to control the url. NavLink can set the class name, style and callback function for the currently selected route.

search参数:路由链接(携带参数):

<Link to='/demo/detail?name=Summy&age=18'}>详情</Link>

注册路由(无需声明,正常注册即可):

<Route path="/demo/detail" component={Detail}/>

接收参数:this.props.location.search

备注:获取到的search是urlencoded编码字符串,需要借助url解析。

Search parameters: routing link (with parameters):


<Link to='/demo/detail? Name=Summy&age=18'} > Details < /Link >

Register the route (no need to declare, just register normally):

<Route path="/demo/detail" component={Detail}/>

Receiving parameter: this.props.location.search

Note: the obtained search is a urlencoded string, which needs to be parsed by url.

今天的分享就到这里了。如果您对今天的文章有什么独特的想法,欢迎评论留言,让我们相约明天,祝您今天过得开心快乐!

That's it for today's sharing. If you have any unique ideas for today's article, please leave a comment, let us meet tomorrow, I wish you a happy day!

翻译:Google翻译

本文由LearningYard新学苑原创,如有侵权,请联系删除。

文字&排版|橙猫猫

审核|李焕



相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码