当前位置: 首页 > ds >正文

React-router v7 第七章(导航)

导航

在React-router V7中,大致有四种导航方式:

  1. 使用Link组件 link
  2. 使用NavLink组件 navlink
  3. 使用编程式导航useNavigate usenavigate
  4. 使用redirect重定向 redirect

Link

Link组件是一个用于导航到其他页面的组件,他会被渲染成一个<a>标签,并具有实际的href属性,指向其链接的资源。

使用

import { Link } from "react-router";export default function App() {return (<Link to="/about">About</Link>)
}

参数

  • to:要导航到的路径
  • replace:是否替换当前路径
  • state:要传递给目标页面的状态
  • relative:相对于当前路径的导航方式
  • reloadDocument:是否重新加载页面
  • preventScrollReset:是否阻止滚动位置重置
  • viewTransition:是否启用视图过渡

to

to 属性是一个字符串,表示要导航到的路径。

<Link to="/about">About</Link>

replace

replace 属性是一个布尔值,表示是否替换当前路径,如果为true,则导航不会在浏览器历史记录中创建新的条目,而是替换当前条目。

<Link replace to="/about">About</Link>

state

state 属性是一个对象,可以把参数传递给目标页面。

<Link state={{ from: "home" }} to="/about">About</Link>// 在目标页面获取状态
import { useLocation } from "react-router";export default function App() {const location = useLocation();console.log(location.state);return <div>Location: {location.state.from}</div>;
}

relative

relative 属性是一个字符串,表示相对于当前路径的导航方式,默认的方式是绝对路径,如果想要使用相对路径,可以设置为path

//默认是绝对路径
<Link relative="route" to="/about">About</Link>//使用相对路径
<Link relative="path" to="../about">About</Link>//例如当前的路由是/index/home,那么使用绝对路径导航到/about,会变成/about
<Link to="/about">About</Link>
//可以使用相对路径导航到/index/about
<Link relative="path" to="../about">About</Link>

reloadDocument

reloadDocument 属性是一个布尔值,表示是否重新加载页面。

<Link reloadDocument to="/about">About</Link>

preventScrollReset

preventScrollReset 属性是一个布尔值,表示是否阻止滚动位置重置。

<Link preventScrollReset to="/about">About</Link>

在这里插入图片描述

viewTransition

viewTransition 属性是一个布尔值,表示是否启用视图过渡,自动增加页面跳转的动画效果。

<Link viewTransition to="/about">About</Link>

NavLink

NavLink 的使用方式和Link组件类似,但是NavLink组件可以实现路由的激活状态。

使用

import { NavLink } from "react-router";export default function App() {return (<NavLink to="/about">About</NavLink>)
}

参数(和Link组件的参数类似)

  • to:要导航到的路径
  • replace:是否替换当前路径
  • state:要传递给目标页面的状态
  • relative:相对于当前路径的导航方式
  • reloadDocument:是否重新加载页面
  • preventScrollReset:是否阻止滚动位置重置
  • viewTransition:是否启用视图过渡

to

to 属性是一个字符串,表示要导航到的路径。

<NavLink to="/about">About</NavLink>

replace

replace 属性是一个布尔值,表示是否替换当前路径,如果为true,则导航不会在浏览器历史记录中创建新的条目,而是替换当前条目。

<NavLink replace to="/about">About</NavLink>

state

state 属性是一个对象,可以把参数传递给目标页面。

<NavLink state={{ from: "home" }} to="/about">About</NavLink>// 在目标页面获取状态
import { useLocation } from "react-router";export default function App() {const location = useLocation();console.log(location.state);return <div>Location: {location.state.from}</div>;
}

relative

relative 属性是一个字符串,表示相对于当前路径的导航方式,默认的方式是绝对路径,如果想要使用相对路径,可以设置为path

//默认是绝对路径
<NavLink relative="route" to="/about">About</NavLink>//使用相对路径
<NavLink relative="path" to="../about">About</NavLink>//例如当前的路由是/index/home,那么使用绝对路径导航到/about,会变成/about
<NavLink to="/about">About</NavLink>
//可以使用相对路径导航到/index/about
<NavLink relative="path" to="../about">About</NavLink>

reloadDocument

reloadDocument 属性是一个布尔值,表示是否重新加载页面。

<NavLink reloadDocument to="/about">About</NavLink>

preventScrollReset

preventScrollReset 属性是一个布尔值,表示是否阻止滚动位置重置。

<NavLink preventScrollReset to="/about">About</NavLink>

在这里插入图片描述

viewTransition

viewTransition 属性是一个布尔值,表示是否启用视图过渡,自动增加页面跳转的动画效果。

<NavLink viewTransition to="/about">About</NavLink>

区别

Navlink 会经过以下三个状态的转换,而Link不会,所以Navlink就是一个link的增强版。

  • active:激活状态(当前路由和to属性匹配)
  • pending:等待状态(loader有数据需要加载)
  • transitioning:过渡状态(通过viewTransition属性触发)

active自动激活

Navlink 会根据当前路由和to属性是否匹配,自动激活。

react-router会为其自动添加样式

a.active {color: red;
}a.pending {animate: pulse 1s infinite;
}a.transitioning {/* css transition is running */
}

如果不喜欢写样式也可以直接用style属性来设置

<NavLink  viewTransition  style={({isActive,isPending,isTransitioning})=>{return {marginRight:'10px',color:isActive?'red':'blue',backgroundColor:isPending?'yellow':'transparent', }
}} to="/index/about">About</NavLink>

警告

  1. viewTransition 需要谷歌111版本才能使用,注意兼容性
    在这里插入图片描述

  2. pending只有数据模式,和框架模式才能使用,声明式路由不能使用

useNavigate

useNavigate 是一个 React-router 的钩子,用于编程式导航,的路由跳转。

例如倒计时结束后,自动返回跳转等,因为这种操作属于逻辑性操作,这时候组件方式的跳转就不合适了,这时候就需要使用编程式跳转。

import { useNavigate } from 'react-router';const navigate = useNavigate();
setTimeout(() => {navigate('/home');
}, 1000);

参数

跟Link组件的参数类似

  • 第一个参数: to跳转的路由 navigate(to)
  • 第二个参数: options配置对象 navigate(to,options)
    • replace: 是否替换当前路由
    • state: 传递的数据
    • relative: 相对路径
    • preventScrollReset: 是否阻止滚动重置

to

import { useNavigate } from 'react-router'; // 导入useNavigate
const navigate = useNavigate(); // 获取navigate函数
navigate('/home'); // 跳转路由

options-replace

跳转页面的时候,是否替换当前路由

navigate('/home',{replace:true});

options-state

传递数据,在跳转的页面中使用通过useLocation的state属性获取

navigate('/home',{state:{name:'张三'}});

options-relative

跳转的方式,默认是绝对路径,如果想要使用相对路径,需要设置为relative:'path'

具体细节查看link-relative

navigate('/home',{relative:'path'});

options-preventScrollReset

跳转页面的时候,是否阻止滚动重置

具体细节查看link-preventScrollReset

navigate('/home',{preventScrollReset:true});

options-viewTransition

跳转页面的时候,是否启用视图过渡,自动增加页面跳转的动画效果。

navigate('/home',{viewTransition:true});

redirect

redirect 是用于重定向,通常用于loader中,当loader返回redirect的时候,会自动重定向到redirect指定的路由。

案例以及用法

权限验证,例如这个路由需要登录才能访问,如果未登录则重定向到登录页。

import { redirect } from "react-router";
{path: "/home",loader: async ({request}) => {const isLogin = await checkLogin();if(!isLogin) return redirect('/login');return {data: 'home'}}
} 
http://www.xdnf.cn/news/3971.html

相关文章:

  • 如何使用VSCode编写C、C++和Python程序
  • ES类迁移方法
  • 【翻译、转载】MCP 提示 (Prompts)
  • Kubernetes 安装 minikube
  • 计算机图形学编程(使用OpenGL和C++)(第2版) 01.环境搭建
  • Python的ArcPy基于Excel表格对大量遥感影像批量重分类
  • 第8章 Python 其他数据类型概述
  • LeetCode 1007. 行相等的最少多米诺旋转 题解
  • ZArchiver正版:高效文件管理,完美解压体验
  • 二、大模型原理:图文解析Transformer原理与代码
  • 第十章.XML
  • Android第三次面试总结之activity和线程池篇(补充)
  • C++基础算法:Dijkstra
  • Python 函数装饰器和闭包(变量作用域规则)
  • 基于k8s系统的API网关-kong网关
  • C++类与对象—下:夯实面向对象编程的阶梯
  • c++STL——set和map的使用
  • 5个情感丰富GPT-4o图像提示词(不是吉卜力风格)
  • transfomer网络构建
  • 平衡二叉搜索树模拟实现1-------AVL树(插入,删除,查找)
  • Fine Structure-Aware Sampling(AAAI 2024)论文笔记和启发
  • 交叉编译 opencv-4.10
  • [MATLAB]通过50个MATLAB程序理解信号与系统的核心概念
  • 学习黑客 TCP/IP
  • 【Springboot进阶】springboot+mybatis+jsqlparser实现数据权限控制
  • 57认知干货:AI机器人产业
  • 力扣解题汇总(困难)
  • 数据结构(4) 堆
  • 6 RAG知识库 和 微调 如何选择?
  • Kubernetes(k8s)学习笔记(五)--部署Ingress实现域名访问和负载均衡