React Router v6 使用笔记 [转]
目录
路由的本质
- 一个路径 path 对应唯一的一个组件 component当我们访问一个 path 自动把 path 对应的组件进行渲染。
const routes = [
{
path: '/about',
component: About,
},
{
path: '/article',
component: Article,
},
]
快速使用
- 使用步骤
- 引入
createBrowerRouter
方法和RouterProvider
组件 - 使用
createBrowerRouter
配置路由 path 和组件的对应关系生成 router 实例 - 渲染
RouterProvider
组件并传入 router 实例
- 引入
- 代码实现
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const router = createBrowserRouter([
{
path: '/',
element: <div>this is layout</div>,
},
{
path: '/login',
element: <div>this is login</div>,
},
{
path: '/about',
element: <div>this is about</div>,
},
])
ReactDOM.createRoot(document.getElementById('root')).render(
<RouterProvider router={router} />
)
- 查看效果
- 在浏览器中,输入
/login
和/
路径查看页面内容是否切换
- 在浏览器中,输入
抽离独立组件
- 通常我们路由渲染的组件内容很多,不合适直接写到 element 选项的后面,实际开发中应该抽象到一个独立的组件
- 1- 新增 Login 组件 / Layout 组件 / About 组件
- src/page/Login.jsx - src/page/Layout.jsx
const Login = () => {
return <div>this is login</div>
}
export default Login
const Layout = () => {
return <div>this is Layout</div>
}
export default Layout
const About = () => {
return <div>this is About</div>
}
export default About
- 2- 配置 router
- router/index.jsx
import { createBrowserRouter } from 'react-router-dom'
import Layout from '../page/Layout'
import Login from '../page/Login'
import About from '../page/About'
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
},
{
path: '/login',
element: <Login />,
},
{
path: '/about',
element: <About />,
},
])
export default router
- 3- 导入 router 完成渲染
- src/main.jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router'
createRoot(document.getElementById('root')).render(
<RouterProvider router={router} />
)
两种路由模式
- 概念: 前端路由由于实现方式的不同,常用的分成 history 路由和 hash 路由,分别由
createBrowerRouter
和createHashRouter
创建
路由模式 | url 表现 | 底层原理 | 是否需要后端支持 | 兼容性 |
---|---|---|---|---|
history | url/login | history 对象 + pushState | 需要 | ie10 |
Hash | url/#/login | 监听 hashchange 事件 | 不需要 | ie8 |
编程式导航
- 概念: 通过 js 编程的方式进行路由页面跳转,比如说从首页跳转到关于页
- 实现步骤
- 导入一个 useNavigate 钩子函数
- 执行 useNavigate 函数 得到 跳转函数
- 在事件中执行跳转函数完成路由跳转
- 我们以从
登录路由
跳转到关于路由
作为例子
import { useNavigate } from 'react-router-dom'
const Login = () => {
const navigate = useNavigate()
return (
<div>
<button onClick={() => navigate('/about')}>go about</button>
</div>
)
}
export default Login
- 注: 如果在跳转时想要替换记录,可以添加额外参数 replace 为 true
navigate('/', { replace: true })
路由传参
- 场景:跳转路由的同时,有时候要需要传递参数
1. searchParams 传参
- 查询字符串传参的方式比较简单,参数的形式以问号拼接到地址后面
路由传参
import { useNavigate } from 'react-router-dom'
const Login = () => {
const navigate = useNavigate()
return (
<div>
<button onClick={() => navigate('/about?id=1001')}>go index</button>
</div>
)
}
export default Login
路由取参
import { useSearchParams } from 'react-router-dom'
const About = () => {
const [params] = useSearchParams()
let id = params.get('id')
return <div>this is about {id}</div>
}
export default About
2. params 传参
- params 方式传参要求会多一些,需要我们在路由表配置的位置添加一个
参数占位
参数占位
const router = createBrowserRouter([
{
path: '/about/:id',
element: <About />,
},
])
export default router
路由传参
import { useNavigate } from 'react-router-dom'
const Login = () => {
const navigate = useNavigate()
return (
<div>
<button onClick={() => navigate('/about/1001')}>go index</button>
</div>
)
}
export default Login
路由取参
import { useParams } from 'react-router-dom'
const About = () => {
const params = useParams()
let id = params.id
return <div>this is about {id}</div>
}
export default About
嵌套路由
- 场景:在我们做的很多的管理后台系统中,通常我们都会设计一个 Layout 组件,在它内部实现嵌套路由
- 实现步骤
- 准备二级路由组件
Board
和Article
- 在路由表中通过
children属性
进行二级路由配置 - 通过内置组件
Outlet
渲染二级路由组件 - 使用内置组件
Link
进行声明式导航配置
- 准备二级路由组件
- 代码实现
- 1- 准备组件
const Article = () => {
return <div>this is article</div>
}
export default Article
const Board = () => {
return <div>this is Board</div>
}
export default Board
- 2- children 属性配置
import Board from '../page/Board'
import Article from '../page/Article'
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
path: 'board',
element: <Board />,
},
{
path: 'article',
element: <Article />,
},
],
},
])
export default router
- 3- 配置二级路由出口
import { Outlet, Link } from 'react-router-dom'
const Layout = () => {
return (
<div>
this is Layout
<div>
<Link to="/board">面板</Link>
<Link to="/article">文章</Link>
</div>
{/* 二级路由渲染出口 */}
<Outlet />
</div>
)
}
export default Layout
默认二级路由
- 场景: 应用首次渲染完毕就需要显示的二级路由
- 实现步骤
- 给默认二级路由标记 index 属性
- 把原本的路径 path 属性去掉
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
index: true,
element: <Board />,
},
{
path: 'article',
element: <Article />,
},
],
},
])
export default router
404 路由配置
- 场景:当 url 的路径在整个路由配置中都找不到对应的 path,使用 404 兜底组件进行渲染
- 1- 准备一个 NotFound 组件
const NotFound = () => {
return <div>this is NotFound</div>
}
export default NotFound
- 2- 路由表末尾配置
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
index: true,
element: <Board />,
},
{
path: 'article',
element: <Article />,
},
],
},
{
path: '/login',
element: <Login />,
},
{
path: '/about/:id',
element: <About />,
},
{
path: '*',
element: <NotFound />,
},
])
export default router
- 尝试访问一个不存在的路径,查看效果~