React Router中Link和NavLink的学习心得总结

2024-08-04 12:34:33

React Router Link和NavLink的学习

Link

现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了<Link>组件用来避免这种状况发生。

当你点击<Link>时，url会更新，组件会被重新渲染，但是页面不会重新加载

先看个例子：

// to为string
<Link to="/about">关于</Link>

// to为obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

// replace
<Link to="/courses" replace />

<Link>使用to参数来描述需要定位的页面。它的值既可是字符串，也可以是location对象（包含pathname、search、hash、与state属性）如果其值为字符串，将会被转换为location对象

replace(bool)：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址；为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

点击Link后，路由系统发生了什么？

Link 组件最终会渲染为 HTML 标签 <a>，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。

虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法（注意，文中出现的 history 指的是通过 history 包里面的 create*History 方法创建的对象，window.history 则指定浏览器原生的 history 对象，由于有些 API 相同，不要弄混）。

history 包中底层的 pushState 方法支持传入两个参数 state 和 path，在函数体内有将这两个参数传输到 createLocation 方法中，返回 location 的结构如下：

location = {
  pathname, // 当前路径，即 Link 中的 to 属性
  search, // search
  hash, // hash
  state, // state 对象
  action, // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACE
  key, // 用于操作 sessionStorage 存取 state 对象
};

系统会将上述 location 对象作为参数传入到 TransitionTo 方法中，然后调用 window.location.hash 或者window.history.pushState() 修改了应用的 URL，这取决于你创建 history 对象的方式。

同时会触发history.listen 中注册的事件监听器。

NavLink

<NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有

activeClassName(string)：设置选中样式，默认值为active
activeStyle(object)：当元素被选中时，为此元素添加样式
exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能

看例子就懂了：

// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

react-router-dom简介(推荐)

目录 react-router-dom 1. 安装 2. 路由组件 2.1 路由组件 2.2 路由匹配组件 2.3 导航组件 3. 使用 3.1 基本使用 3.2 Route动态传参 3.3 嵌套路由 3.4 路由重定向 3.5 滚动还原 3.6 路由守卫 3.7代码分割 3.8 withRouter 3.9 其他hooks react-router-dom react-router-dom文档地址: https://reacttraining.com/react-router/ 1. 安装 r
react-router-dom 降低版本的两种方法详解

目录前言 1. 使用 npm 命令降低到指定版本 2.手动修改 package.json 文件,然后 npm install 前言 react-router-dom 如今已经升级到了 V6 版本,相比较 V5 版本,变化还是挺大的.如今使用 npm install react-router-dom -S 命令来下载 react-router-dom ,会自动下载 V6 版本, V6 版本会在接下来的一段时间内成为主流.不过对于用习惯了 V5 版本的开发者而言,自然是有些不习惯.本篇文章就记录下
react-router v6新特性总结示例详解

目录支持嵌套路由 Outlet 嵌套路由可配置化 useNavigate代替useHistory 由于之前的项目一直使用的是V5版本,最新新建项目的时候,默认使用的是V6版本,根据官方的介绍,V6版本的新特性如下. 新特性 <Switch>重命名为<Routes>: <Route>的新特性变更: 嵌套路由变得更简单: 新钩子useRoutes代替react-router-config: 用useNavigate代替useHistory: Link不再支持compone
react-router-domV6嵌套路由实现详解

目录 V6新特性 <Route>的属性变更component/render->element <Link/>使用变动 <Redirect/> 替换为 <Navigate/> <Switch/> 重命名为 <Routes/> 用useNavigate代替useHistory 依赖包大小从20kb减少到8kb,整体体积减少新钩子useRoutes代替react-router-config 新标签:<Outlet/> V
React Router中Link和NavLink的学习心得总结

目录 React Router Link和NavLink的学习 Link NavLink 总结 React Router Link和NavLink的学习 Link 现在,我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了<Link>组件用来避免这种状况发生. 当你点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载先看个例子: // to为string <Link to="/abo
Backbone中View之间传值的学习心得

Backbone中的View就是用来展示由Model层传出的数据,或者在View里产生的一些数据,包括输入框中输入等产生的数据,由当前View传递到另外一个View层里,应该怎么办呢,我之前读到一位博主<Backbone View的三种通信方式 >写的尤为的清晰,在我实际的项目中,常常使用的也就是最后一种方式. 嘿嘿,分享知识是一件快乐的事情,我就直接借鉴表述一下如下: 直接用 Backbone 作为事件注册机, 代码如下: var ApplicationView = Backbone.Vie
Android中Intent组件的入门学习心得

目录什么是 Intent ? Intent 的类型? Intent 的组成显式 Intent 的使用隐式 Intent 的使用总结什么是 Intent ? Intent是Android开发中一个非常重要且常用的类,Intent是一个消息传递对象,可以用来从其他应用组件请求操作,使用Intent可以在一个组件中同一APP中的另一个组件或者是启动另一个APP的组件(这里所说的组件包括Activity.Service和Broadcast). ctivity.service和broadcast
react router 4.0以上的路由应用详解

本文介绍了react router 4.0以上的路由应用,分享给大家,具体如下: 在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起. <Route component={App}> <Route path="groups" components={Groups} /> <Route path="users" components={Users}> <Rou
React Router V4使用指南(精讲)

一.前端路由和后端路由 1)后端路由多页应用中,一个URL对应一个HTML页面,一个Web应用包含很多HTML页面,在多页应用中,页面路由控制由服务器端负责,这种路由方式称为后端路由. 多页应用中,每次页面切换都需要向服务器发送一次请求,页面使用到的静态资源也需要重新加载,存在一定的浪费.而且,页面的整体刷新对用户体验也有影响,因为不同页面间往往存在共同的部分,例如导航栏.侧边栏等,页面整体刷新也会导致共用部分的刷新. 2)前端路由在单面应用中,URL发生并不会向服务器发送新的请求,所以"逻
React Router v4 入坑指南(小结)

距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的
React路由管理之React Router总结

React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢,官方的介绍是: A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dy
React Router基础使用

React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步下面就来简单介绍其基础使用,更全面的可参考指南 1. 它看起来像是这样在页面文件中在外部脚本文件中 2. 库的引入 React Router库的引入,有两种方式 2.1 浏览器直接引入可以引用这里的浏览器版本,或者下载之后引入然后就可以直接使用 ReactRouter 这个对象了,我们可能会使用到
浅谈React Router关于history的那些事

如果你想理解React Router,那么应该先理解history.更确切地说,是history这个为React Router提供核心功能的包.它能轻松地在客户端为项目添加基于location的导航,这种对于单页应用至关重要的功能. npm install --save history 存在三类history,分别时browser,hash,与 memory.history包提供每种history的创建方法. import { createBrowserHistory, createHashHi
React Router 如何使用history跳转的实现

在react-router中组件里面的跳转可以用<Link> 但是在组件外面改如何跳转,需要用到react路由的history replace方法和push方法使用形式一样,replace的作用是取代当前历史记录 go,此方法用来前进或者倒退,history.go(-1); goBack,此方法用来回退,history.goBack(); goForward,此方法用来前进,history.goForward(); 1.hook import {useHistory} from 'react-

React Router中Link和NavLink的学习心得总结

目录

React Router Link和NavLink的学习

Link

NavLink

总结

相关推荐

随机推荐