React-Router路由

1.React Router的基本使用

安装：安装时，选择react-router-dom，react-router会包含一些react-native的内容，web开发并不需要；

npm install react-router-dom

路径模式

• BrowserRouter使用history模式；
• HashRouter 使用hash模式；

路由配置和跳转

• 通常路径的跳转是使用Link组件，最终会被渲染成a元素；
• NavLink是在Link基础之上增加了一些样式属性；
• to属性：Link中最重要的属性，用于设置跳转到的路径；

通过useSearchParams函数获取，useSearchParams由react-router-dom库提供的api，该函数返回一个entries对象，通过Object.fromEntries转换成普通对象即可；

路由的配置文件

router.js

import { Navigate } from "react-router-dom"
import Home from "../pages/Home"
import HomeRecommend from "../pages/HomeRecommend"
import HomeRanking from "../pages/HomeRanking"
// import Category from "../pages/Category"
// import About from "../pages/About"
import React from "react"
 
const Category = React.lazy(() => import('../pages/Category'))
const About = React.lazy(() => import('../pages/About'))
 
const Routes = [
  {
    path: '/',
    element: <Navigate to='/home' />
  },
  {
    path: '/home',
    element: <Home/>,
    children: [
      {
        path: '/home/recommend',
        element: <HomeRecommend />
      },
      {
        path: '/home/ranking',
        element: <HomeRanking />
      },
      {
        path: '/home/category',
        element: <Category />
      }
    ]
  },
  {
    path: '/about',
    element: <About />
  }
]
 
export default Routes

组件中使用

 如果我们对某些组件进行了异步加载（懒加载），那么需要使用Suspense进行包裹：