React-router v7 第七章(导航)

Link

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

使用

ts 复制代码

import { Link } from "react-router";

export default function App() {
  return (
    <Link to="/about">About</Link>
  )
}

参数

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

to

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

ts 复制代码

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

replace

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

ts 复制代码

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

state

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

ts 复制代码

<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。

ts 复制代码

//默认是绝对路径
<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 属性是一个布尔值，表示是否重新加载页面。

ts 复制代码

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

preventScrollReset

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

ts 复制代码

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

viewTransition

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

ts 复制代码

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

NavLink

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

使用

ts 复制代码

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 属性是一个字符串，表示要导航到的路径。

ts 复制代码

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

replace

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

ts 复制代码

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

state

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

ts 复制代码

<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。

ts 复制代码

//默认是绝对路径
<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 属性是一个布尔值，表示是否重新加载页面。

ts 复制代码

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

preventScrollReset

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

ts 复制代码

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

viewTransition

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

ts 复制代码

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

区别

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

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

active自动激活

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

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

css 复制代码

a.active {
  color: red;
}

a.pending {
  animate: pulse 1s infinite;
}

a.transitioning {
  /* css transition is running */
}

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

ts 复制代码

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

警告

viewTransition 需要谷歌111版本才能使用，注意兼容性
pending只有数据模式，和框架模式才能使用，声明式路由不能使用

useNavigate

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

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

ts 复制代码

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

ts 复制代码

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

options-replace

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

ts 复制代码

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

options-state

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

ts 复制代码

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

options-relative

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

具体细节查看link-relative

ts 复制代码

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

options-preventScrollReset

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

具体细节查看link-preventScrollReset

ts 复制代码

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

options-viewTransition

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

ts 复制代码

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

redirect

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

案例以及用法

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

ts 复制代码

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