React Router v6 使用笔记

最新推荐文章于 2024-08-13 14:03:53 发布

NGC_2070

最新推荐文章于 2024-08-13 14:03:53 发布

阅读量1.1k

点赞数 2

分类专栏： # React学习笔记文章标签： react.js 前端 javascript

原文链接：https://cp_fe.gitee.io/react-course/react-router

版权

React学习笔记专栏收录该内容

21 篇文章 3 订阅

订阅专栏

React Router v6 使用笔记 [转]

原文：https://cp_fe.gitee.io/react-course/react-router

React Router v6 使用笔记 [转]

路由的本质

一个路径 path 对应唯一的一个组件 component当我们访问一个 path 自动把 path 对应的组件进行渲染。

const routes = [
  {
    path: '/about',
    component: About,
  },
  {
    path: '/article',
    component: Article,
  },
]

快速使用

使用步骤
1. 引入 createBrowerRouter 方法和 RouterProvider组件
2. 使用 createBrowerRouter 配置路由 path 和组件的对应关系生成 router 实例
3. 渲染 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 编程的方式进行路由页面跳转，比如说从首页跳转到关于页
实现步骤
1. 导入一个 useNavigate 钩子函数
2. 执行 useNavigate 函数得到跳转函数
3. 在事件中执行跳转函数完成路由跳转
我们以从登录路由 跳转到 关于路由 作为例子

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 组件，在它内部实现嵌套路由

实现步骤
1. 准备二级路由组件 Board 和 Article
2. 在路由表中通过 children属性 进行二级路由配置
3. 通过内置组件 Outlet 渲染二级路由组件
4. 使用内置组件 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

默认二级路由

场景: 应用首次渲染完毕就需要显示的二级路由
实现步骤
1. 给默认二级路由标记 index 属性
2. 把原本的路径 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