React 路由篇(v6)

小徐努力中

已于 2024-07-25 16:16:11 修改

阅读量1k

点赞数 21

分类专栏： React 文章标签： react.js javascript 前端前端框架

于 2024-07-23 16:38:04 首次发布

本文链接：https://blog.csdn.net/Lil_y1/article/details/140637540

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写在开头

本文是根据尚硅谷react课程React Router Dom v6篇的总结笔记

01_一级路由

Router 6中一级路由跟5版本大体结构是差不多的，具体细节在注册路由组件时，5版本中的component更改为element且组件写法也不同了。

// NavLink 路由链接
<NavLink to='/home'>Home</NavLink>
// Link 路由链接
<Link to='/home'>Home</Link>
// 路由组件
<Route path='/home' element={<Home />} /> // v6
//<Route path='/home' component={Home>} /> // v5

v5中的包裹多组件实现路径组件一一匹配的Switch已经废除，取而代之的是Routes

<Routes>
     <Route path='/about' element={<About />} />
     <Route path='/home' element={<Home />} />
</Routes>

02_NavLink的高亮显示

v5中NavLink高亮显示由activeClassName实现，v6中这个方法已经废除了，此时实现高亮效果用的是className，它会有一个回调函数，参数为一个名为isActive的对象，该对象中同名isActive属性保存着该路由是否被激活，结果为true时即激活时返回所要高亮效果类名。

// 封装一个函数来控制高亮
const computedClassName = (isActive) => {
    return isActive ? 'base active' : 'base'
}
<NavLink
     className={({ isActive }) => computedClassName(isActive)}
     to='/home'
>Home</NavLink>

03_重定向

v5中重定向会在所有路由下使用Redirect来进行重定向，在v6中我们使用Navigate

// 引入Navigate
import { NavLink, Route, Routes, Navigate } from 'react-router-dom'
// 使用
<Routes>
    <Route path='/about' element={<About />} />
    <Route path='/home' element={<Home />} />
    {/* 重定向 */}
    <Route path='/' element={<Navigate to='/about' />} />
</Routes>

04_路由表

v6中引入了路由表这个概念，简化了注册路由，同时更明显的展示路由的嵌套结构，使用到useRoutes。一般我们会另外创建一个routes文件来单独建立路由表，这样更加清晰明了。

组件

import { NavLink, useRoutes } from 'react-router-dom'
// 引入路由表文件
import routes from './routes'
// 调用useRoutes
const element = useRoutes(routes)
// 路由链接
<NavLink>Home</NavLink>
// 注册路由
<div>{element}</div>

路由表

import Home from '../pages/Home'
import About from '../pages/About'
import { Navigate } from 'react-router-dom'
const routes = [
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/home',
    element: <Home />,
  },
  {
    path: '/',
    element: <Navigate to='/about' />,
  },
]
export default routes

05-嵌套路由

嵌套路由我们只需要在路由表中你所需要的组件添加一个children属性

const routes = [
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/home',
    element: <Home />,
    // 实现嵌套路由
    children: [
      {
        path: 'news',
        element:<News />
      },
      {
        path: 'message',
        element:<Message />
      }
    ]
  },
  {
    path: '/',
    element: <Navigate to='/about' />,
  },
]

此时我们会面对一个问题，子路由位置怎么放，这时引入Outlet。类似于vue中的router-view

// 引入
import { Outlet } from 'react-router-dom'
{/* 路由显示位置 */}
<Outlet />

06-路由参数传递_params

v6中params参数的传递和接收没太大变化，但是我们使用params参数时要借助useParams函数

{/* 传递params参数 */}
<Link to={`detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link>

// 路由表中接收params参数
path: 'detail/:id/:title/:content'

// 使用params参数
import { useParams } from 'react-router-dom'
const { id, title, content } = useParams()

07-路由参数传递_search

v6中search参数的传递和接收没太大变化，但是我们使用search参数时要借助useSearchParams函数

{/* 传递search参数 */}
<Link to={`detail/?id=${item.id}&title=${item.title}&content=${item.content}`}>
    {item.title}
</Link> */}

// 路由表中 无需变化
 path:'detail', //search 参数接收

// 使用search参数
import { useSearchParams } from 'react-router-dom'
const [search] = useSearchParams()
const id = search.get('id')
const title =search.get('title')
const content =search.get('content')

08-路由参数传递_state

v6中params参数的接收没有太大变化，但传递时我们要在路由链接中直接使用state={{key=value}}来传递，同时我们使用state参数时要借助useLoaction函数

{/* 传递state参数 */}
<Link to='detail' state={{id: item.id,title:item.title,content:item.content}}>
    {item.title}
</Link>
 
// 路由表中state参数接收
path:'detail', //state 参数接收

// 使用state参数
import { useLocation } from 'react-router-dom'
const {state:{id,title,content}} = useLocation()

09-编程式路由导航

v5中我们往往是使用this.prosp.history类似这样的方法进行操作，而在v6中我们使用useNavigate钩子

// 引入
import { useNavigate } from 'react-router-dom'
// 调用
const navigate = useNavigate()
// 使用
<button onClick={()=>navigate(1)}>前进</button>
<button onClick={()=>back(-1)}>后退</button>

10-路由懒加载

在大型的 React 应用中，为了提高页面加载速度和性能，我们经常会使用懒加载技术来延迟加载组件或资源。懒加载可以将页面初始加载的内容减少到最小，只在需要时再动态加载额外的组件或资源，从而提高页面的加载速度和用户体验

在 React 中，我们可以使用 lazy 函数和 Suspense 组件来实现懒加载。lazy 函数允许我们动态地 import 一个组件，而 Suspense 组件则允许我们在组件加载时显示一个加载指示器。

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;