无废话、光速上手 React-Router

在这里插入图片描述

React-Router

React Router 是一个用于 React 应用的声明式路由库。它允许开发者通过组件化的方式定义应用的路由结构，使得路由管理更加直观和可维护

安装

pnpm i react-router-dom

定义路由

定义路由有两种方式，分别是对象路由和路由组件，下面将逐步介绍这两种方式的用法

两种方式

对象路由

对象路由通过 createBrowserRouter 数组中的每一项来定义，该方式适合复杂的情况下使用

import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'function Home() {return (<><h1>Home</h1></>)
}function Cate() {return (<><h1>Cate</h1></>)
}// 核心代码
const router = createBrowserRouter([{// 路由访问路径path: "/",// 对应的页面组件element: <Home />},{path: "/cate",element: <Cate />}
])const root = ReactDOM.createRoot(document.getElementById('root')!);// 使用路由                                 
root.render(<RouterProvider router={router}></RouterProvider>
);

组件路由

直接通过组件来定义路由，这种方式适合简单的情况下使用

import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom'function Home() {return (<><h1>Home</h1></>)
}function Cate() {return (<><h1>Cate</h1></>)
}const root = ReactDOM.createRoot(document.getElementById('root')!);root.render(<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="/cate" element={<Cate />} /></Routes></BrowserRouter>
);

嵌套路由

当多个页面需要使用相同组件时，比如网站导航栏和底部，这两个组件通常会出现在所有页面当中，而这些公共组件我们没必要在多个页面单独引入，所以就需要用到嵌套路由

对象路由

import ReactDOM from 'react-dom/client';
import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'// 布局路由
function Layout() {return (<><div>这是一个通用导航栏组件</div>{/* 核心：这里一定要加 Outlet 否则无法显示子路由 */}<Outlet /><div>这是一个通用底部组件</div></>)
}function Home() {return (<><h1>Home</h1></>)
}function Cate() {return (<><h1>Cate</h1></>)
}function Login() {return (<><h1>Login</h1></>)
}const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{// 定义为默认路由：当访问 / 时，会显示 Home 组件index: true,element: <Home />},{path: "/cate",element: <Cate />}]},{path: "/login",element: <Login />}
])const root = ReactDOM.createRoot(document.getElementById('root')!);root.render(<RouterProvider router={router}></RouterProvider>
);

组件路由

<BrowserRouter><Routes><Route path="/" element={<Layout />}><Route index element={<Home />} /><Route path="/cate" element={<Cate />} /></Route>{/* <Route element={<Layout />}><Route path="/" element={<Home />} /><Route path="/cate" element={<Cate />} /></Route> */}<Route path="/login" element={<Login />} /></Routes>
</BrowserRouter>

404 路由

当访问一个不存在的页面时会匹配到我们自定义的 404 路由

// 404页
function NotFound() {return (<><h1>404：页面未找到</h1></>)
}const router = createBrowserRouter([...,{path: "*",element: <NotFound />}
])

<BrowserRouter><Routes>...<Route path="*" element={<NotFound />} /></Routes>
</BrowserRouter>

动态路由

通常应用于通过 id 获取接口中对应的数据

const router = createBrowserRouter([// 单个：/cate/100{path: "/cate/:id",element: <Cate />},// 多个：/cate/100/200{path: "/cate/:one/:two",element: <Cate />},// 可选：/cate 或 /cate/100{path: "/cate/:id?",element: <Cate />},// 无限：/cate/100/200/300/400/500{path: "/cate/*",element: <Cate />}
])

<BrowserRouter><Router><Routes>{/* 路由组件不支持可选方式，但可以这样实现同样的效果 */}<Route path="/cate" element={<Cate />} /><Route path="/cate/:id" element={<Cate />} /><Route path="/cate/:one/:two" element={<Cate />} /><Route path="/cate/*" element={<Cate />} /></Routes></Router>
</BrowserRouter>

获取动态路由数据

通过 useParams() 来获取动态路由的参数数据

function Cate() {const params = useParams();return (<><h1>Cate</h1><pre>{JSON.stringify(params)}</pre></>);
}

访问：/cate/100/200

结果：{"one":"100","two":"200"}

路由跳转

通过 Link 进行路由跳转，其实它的本质还是通过 a 标签进行跳转的

<Link to="/cate">跳转</Link>
{/* 最终会编译成 */}
<a href="/cate">跳转</a>

声明式跳转

function Layout() {return (<><div>这是一个通用导航栏组件</div><Outlet /><div>这是一个通用底部组件</div></>)
}function Home() {return (<><h1>Home</h1><Link to="/cate">跳转到分类页</Link><Link to="/cate/100">跳转到分类页(带参数)</Link></>)
}function Cate() {return (<><h1>Cate</h1><Link to="/">跳转到首页</Link></>);
}const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{index: true,element: <Home />},{path: "/cate/:id?",element: <Cate />}]}
])

编程式跳转

更多关于 useNavigate 的用法请见下方 API 目录

import { ..., useNavigate } from 'react-router-dom'function Home() {const navigator = useNavigate()return (<><h1>Home</h1><div onClick={() => navigator("/cate")}>跳转到分类页</div><button onClick={() => navigator("/cate/100")}>跳转到分类页(带参数)</button></>)
}

获取跳转参数

function Home() {const navigator = useNavigate()return (<><h1>Home</h1><Link to="/cate?title=大前端">跳转到分类页</Link><button onClick={() => navigator("/cate/100?title=Java")}>跳转到分类页(带参数)</button></>)
}function Cate() {// 获取路由动态参数的数据const params = useParams()// 获取查询参数?后面的数据const [searchParams] = useSearchParams()console.log(searchParams); // URLSearchParams {size: 1}return (<><h1>Cate</h1><div>{JSON.stringify(params)}</div>{/* {id: '100'} */}<div>{JSON.stringify(searchParams.get("title"))}</div>{/* Java */}</>);
}

路由模式

各个主流框架的常用路由模式有两种，分别是 history 和 hash 模式, ReactRouter 分别由 createBrowerRouter 和 createHashRouter 函数负责创建

路由模式	url表现	底层原理
history	`url/login`	`history` 对象 + `pushState`事件
hash	`url/#/login`	监听 `hashChange` 事件

路由懒加载

默认情况下像以下代码在页面被访问时尽管条件为 false , 组件也一样会被加载。而如果使用了路由懒加载，那么只有条件满足时候或者说组件被使用时才会被加载，这样有助于性能优化及加载速度

{false && <Article>}

假设 pages 中有 Home 和 Cate 组件，我们可以通过 lazy 将他们定义为懒加载模式

const router = createBrowserRouter([{path: "/",lazy: () => import("@/pages/Home/index.tsx")},{path: "/cate",// 可以省略：index.tsxlazy: () => import("@/pages/Cate")}
])

loader

通过 loader 函数我们可以在页面 渲染之前 传递给页面指定的数据，并通过 useLoaderData 来接收数据

function Cate() {const loaderData = useLoaderData()console.log(loaderData); // Hello Worldreturn ...
}const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{index: true,element: <Home />},{page: "/cate/:id",element: <Cate />,loader: ({params}) => {return "Hello World!"}}]}
])

数据也可以是异步的，通常用于获取后端接口的数据

loader: () => {return new Promise((resolve) => {setTimeout(() => {resolve("Hello World!")}, 3000)})
}

还可以获取路由参数，通过参数来获取对应的数据

{path: "/cate/:id",element: <Cate />,loader: ({ params }) => {return new Promise((resolve) => {setTimeout(() => {resolve(`分类的参数：${params.id}`)}, 3000)})}
}

API

useLocation

该方法返回当前 location 对象，主要用于监听路由的变化执行对应的逻辑

function Home() {let location = useLocation();useEffect(() => {// 逻辑代码}, [location]);return ...;
}

假如访问：/cate/100?title=Java#123，那么 location 的结果如下

{"pathname":"/cate/100","search":"?title=Java","hash":"#123","state":{"data":"Hello World!"},"key":"8lu1q217"}

useNavigate

该方法主要用于编程式导航的跳转

function Home() {const navigator = useNavigate()return (<><div onClick={() => navigator("/cate")}>跳转</div></>)
}

replace

指定 replace: true 将替换历史记录堆栈中的当前条目，而不是添加新的条目。简单来说就是默认情况下它的值为 false 也就意味着当你从 A 页面跳转到 B 页面时，点击浏览器的回退功能可以正常回退到 A 页面。但如果将值设置为 true 则跳转到 B 页面时无法回退到 A 了，因为 A 的历史记录栈被 B 替换了

navigator("/cate", { replace: true })

<Navigate to="/cate" replace />

preventScrollReset

默认情况下该参数的值为 false，表示组件重新渲染或重新跳转进入时会自动滚到顶部，如果设置为 true 则表示保持当前位置

state

在跳转时也可以通过 state 进行传递数据，通过 useLocation 接收数据

navigator("/cate", { state: { data: "Hello World!" } })

<Navigate to="/cate" state={{ data: "Hello World!" }} />

示例：

function Home() {const navigator = useNavigate()return (<><h1>Home</h1><div onClick={() => navigator("/cate", { state: { data: "Hello World!" } })}>跳转</div></>)
}function Cate() {const location = useLocation()return (<><h1>Cate</h1><div>{JSON.stringify(location.state)}</div>{/* {"data":"Hello World!"} */}</>);
}

<Navigate> 该组件会在渲染时自动重定向到指定的路径。它是 useNavigate 的组件包装器，并接受与 props 相同的所有参数

我们可以应用于以下场景：当有 token 时显示页面，反之跳转到 login 页

import { Navigate } from 'react-router-dom'const AuthRoute = ({ children }: { children: React.ReactNode }) => {const token = "..."if (token) {return <>{children}</>} else {return <Navigate to="/login" replace />}
}export default AuthRoute