当前位置：首页 > news >正文

React Router v7数据模式使用指南

news 2026/6/28 17:09:09

React Router官方文档：https://reactrouter.com.cn/

react-router中路由模式分为：框架模式、数据模式、声明式模式

以下仅为 * 数据模式 * 的使用笔记

安装当前版本v7

npm install react-router

使用createBrowserRouter创建路由配置，支持普通路由和嵌套路由。router/index.js

import{createBrowserRouter}from"react-router";importIndexfrom"@/pages/Index";importUserfrom"@/page/User";importLoginfrom"@/page/Login";constrouter=createBrowserRouter([// 普通路由{path:"/",Component:Index,},// 嵌套路由{path:"/user",Component:User,children:[{// path: "login",index:true,// 默认路由Component:Login,},{path:"register",Component:Register,},]}]);exportdefaultrouter;

使用RouterProvider绑定路由 main.js

import{RouterProvider}from"react-router/dom";importrouterfrom"./router/index.js";createRoot(document.getElementById("root")).render(<StrictMode><Provider store={store}>{/* <App /> */}{/* 绑定路由 */}<RouterProvider router={router}/></Provider></StrictMode>);

组件内通过Outlet展示子路由，Link/NavLink实现导航

import{Outlet,Link}from"react-router";exportdefaultfunctionUser(){return(<div><h1>用户</h1><Link to="/user">登录</Link><Link to="/user/register">注册</Link>{/* 二级路由出口 */}<Outlet/></div>);}

路由导航

4.1 Link

import{Link}from"react-router";<Link to="/">首页</Link><Link to="/about">关于</Link>

4.2 NavLink 需要渲染活跃和待处理状态的导航链接

import{NavLink}from"react-router";<NavLink to="/messages"className={({isActive,isPending,isTransitioning})=>[isPending?"pending":"",isActive?"active":"",isTransitioning?"transitioning":"",].join(" ")}>Messages</NavLink>

4.3 Form

<Form action="/search"><input type="text"name="q"/></Form>

4.4 重定向redirect

import{redirect}from"react-router";exportasyncfunctionloader({request}){letuser=awaitgetUser(request);if(!user){returnredirect("/login");}return{userName:user.name};}

4.5 编程式 useNavigate

import{useNavigate}from"react-router";exportfunctionuseLogoutAfterInactivity(){letnavigate=useNavigate();useFakeInactivityHook(()=>{// navigate("/logout");// 使用navigate函数并设置replace为true来替换当前历史记录navigate("/logout",{replace:true});});}

4.6 路由导航传参 useSearchParams 、useParams

// 4.6.1 searchParams传参navigate("/user?id=123");// 取const[params]=useSearchParams();letid=params.get("id");// 4.6.2 params传参navigate("/user/123");// 取const[params]=useParams();letid=params.id;

Hooks解析

useLocation：返回当前的 Location，包含有关 URL 路径的信息，以及可能的一些任意状态和键。

// 属性{"pathname":"/index",// URL 路径名，以 / 开头。"search":"",// URL 查询字符串，以 ? 开头。"hash":"",// URL 片段标识符，以 # 开头。"state":null,// 与此 location 关联的任意数据值。"key":"f5ecz0os"// 与此 location 关联的唯一字符串。 可用于在其他存储 API（如 localStorage）中安全地存储和检索数据。注意：此值在初始 location 上始终为 "default"。}