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'
    }
  }
}