react笔记-03react-router篇

本文章是react的路由笔记

一、react路由（v5版本）

1. 什么是路由（前端）？

一个路由就算一个映射关系（key: value)
key为路径，value为组件

2. 前端路由的工作原理

根据浏览器历史记录：history(BOM)

3. 路由的基本使用(react-router-dom)

3.1 `react-router`:（有三种库）

web (react-router-dom)
react-native
any（react-router）

3.2 `react-router-dom` 的api（版本5/v5）

安装

npm i react-router-dom@5

内置组件

1. <BrowserRouter>
2. <HashRouter>
3. <Route>
4. <Redirect>
5. <Link>
6. <NavLink>
7. <Switch>

其他

history 对象
match 对象
withRouter 函数

3.3 基本使用

App.js中

import { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

export default class App extends Component {
	render() {
		return {
			<div>
				<header>
					{/* 编写路由链接 */}
					<Link to="/home">首页</Link>
					<Link to="/about">关于</Link>
				</header>
				<main>
					{/* 注册路由 */}
					<Route path="/home" component={Home} />
					<Route path="/about" component={About} />
				</main>
			</div>
		}
	}
}

index.js中

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, HashRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(
	{/* history路由 */}
	<BrowserRouter>
		<App />
	</BrowserRouter>
	{/* hash路由 */}
	<HashRouter></HashRouter>
	, document.querySelect('#root'))

3.4 路由组件与一般组件

一般组件的props信息需要通过父组件传递，而路由组件的props信息是路由信息，不需要传递。

3.5 NavLink的使用

NavLink的基本使用

匹配上的路由会默认加上active这个类名

<NavLink to="/home">首页</NavLink>
<NavLink to="/about">关于</NavLink>

通过activeClassName可以自定义选中的类名

<NavLink to="/home" activeClassName="header-active">首页</NavLink>
<NavLink to="/about" activeClassName="header-active">关于</NavLink>

对NavLink的封装

组件的使用：

{/* 「首页」标题：组件标签标签体内容（特殊的标签属性，组件内可以通过this.props.children获取） */}
<MyNavLink to="/home">首页</MyNavLink>
<MyNavLink to="/about">关于</MyNavLink>

组件的封装：

{/* 一组props */}
<NavLink to={to} activeClassName="header-active">首页</NavLink>
{/* 多组props */}
<NavLink {...this.props} activeClassName="header-active"/>

3.6 Switch的使用

Switch：当匹配到第一个路由的时候就停止

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/about" component={Demo} />
</Switch>

3.7 路由的模糊匹配与精准匹配

模糊匹配：

<header>
  <NavLink to="/about/a/b">关于</NavLink>
</header>
<main>
  <Switch>
    <Route path="/about" component={About} />
  </Switch>
</main>

精准匹配：exact={true}

<Route exact={true} path="/about" component={About} />

3.8 Redirect的使用

Redirect(重定向)：谁都匹配不上，就走Redirect

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
  <Redirect to="/about" />
</Switch>

3.9 嵌套路由

嵌套路由要写完整路径

<div>
  <NavLink to="/home/news">News</NavLink>
  <NavLink to="/home/message">Message</NavLink>
</div>
<div>
  <Switch>
    <Route path="/home/news" component={News} />
    <Route path="/home/message" component={Message} />
  </Switch>
</div>

3.10 路由组件传参

1. 向路由组件传递`params`参数

传递的参数：

<NavLink to={`/home/news/${title}/${page}`}>News</NavLink>
<Route path="/home/news/:title/:page" component={News} />

News组件可以通过this.props.match.params获取到params参数

2. 向路由组件传递`search(query)`参数（显式传参）

使用：

<NavLink to={`/home/news?title=${title}&page=${page}`}>News</NavLink>

{/* search参数无需声明接收，正常注册路由即可 */}
<Route path="/home/news" component={News} />

接收：

接收到的search参数是urlencoded编码的字符串，需要借助querystring解析

key=value&key=value => urlencoded编码

安装query-string

npm i query-string

import qs from 'query-string'

qs.parse(this.props.location.search)

3. 向路由组件传递`state`参数（隐式传参）

使用：

<NavLink to={{pathname: '/home/news', state: { title, page }}}>News</NavLink>

{/* state参数无需声明接收，正常注册路由即可 */}
<Route path="/home/news" component={News} />

接收：

通过this.props.location.state接收，BrowserRouter刷新参数不丢失，HashRouter刷新参数丢失

3.11 push与replace模式

push：会留下痕迹，可以通过回退键，回到上一页
replace：不会留下痕迹，不能回到上一页

3.12 编程式路由导航

// 路由跳转
this.props.history.replace('/xxx', [state])
this.props.history.replace('/xxx', { id, title })
this.props.history.push('/xxx', [state])
this.props.history.push('/xxx', { id, title })
// 路由前进
this.props.history.goForward()
// 路由后退
this.props.history.goBack()
// 与vue中的go类似，传入number，正数表示前进，负数表示后退
this.props.history.go(number)

3.13 withRouter的使用

在一般组件内，不能像路由组件一样获取到路由信息，需要在组件上包裹一个withRouter。withRouter可以加工一般组件，让一般组件具备路由组件所特有的api，withRouter的返回值是一个新组件。

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class App extends Component {
  handleClick = () => {
    console.log(this.props)
  }

  render() {
    return (
      <div onClick={this.handleClick}>关于</div>
    )
  }
}

export default withRouter(App)

二、react路由（v6版本）

1. Component

1.1 `<Routes/>`和`<Route/>`

v6版本中移除了之前的<Switch>，用<Routes>代替
<Routes/>和<Route/>要配合使用，且必须要用<Routes>包裹<Route>
<Route caseSensitive>属性用于指定：匹配时是否区分大小写（默认为false）
<Route>也可以嵌套使用，且可配合useRoutes()配置路由表，但需要通过<Outlet>组件来渲染其子路由
<Route>的end属性：如果他的子路由匹配，父亲路由失去高亮

写法区别：

import { Routes, Route, Navigate } from 'react-router-dom'

{/* Switch组件 替换成 Routes */}
<Routes>
    {/* Route的component属性变成element属性 */}
    {/* v5写法：<Route path='/' component={Home} /> */}
    {/* v6写法：<Route path='/' element={<Home />} /> 写成标签 */}
    <Route caseSensitive path='/home' element={<Home />} />
    <Route path='/about' element={<About />} />
    {/* 重定向，不用Redirect，而是Navigate */}
    {/* 用法：<Navigate to="/home" replace={true} /> */}
    {/* replace跳转模式：push/replace模式，默认false（push） */}
    <Route path='/' element={<Navigate to="/home" />} />
  	{/* end属性：如果他的子路由匹配，父亲路由失去高亮 */}	
  	<Route path='/' end element={<Navigate to="/home" />} />
</Routes>

1.2 `<NavLink>`

自定义选中的高亮样式

{/* v5写法 */}
<NavLink activeClassName="xxx">
{/* v6写法：在className属性中写入函数，函数返回类名 */}
<NavLink to='/home' className={({isActive}) => { return isActive ? 'item active' : 'item' }}>Home</NavLink>

<NavLink to='/home' className={(e) => {console.log(e);}}>Home</NavLink>

下面是的参数e：

在这里插入图片描述

1.3 `<Navigate>`

<Navigate>：重定向，不用Redirect，而是Navigate。渲染到页面上，会让路由进行跳转。
用法：<Navigate to="/home" />
replace属性：路由跳转模式，push/replace模式，默认false（push）<Navigate to="/home" replace={true} />

2. Hooks

2.1 useRoutes()

注册路由：

写法1：

{/* 注册路由 */}
<Routes>
  <Route path='/home' element={<Home />} />
  <Route path='/about' element={<About />} />
  <Route path='/' element={<Navigate to="/home" />} />
</Routes>

写法2：由useRoutes生成路由表

import React from 'react'
import { NavLink, Navigate, useRoutes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {

  // 通过路由表生成路由
  const routeElement = useRoutes([
    {
      path: '/home',
      element: <Home />
    },
    {
      path: '/about',
      element: <About />
    },
    {
      path: '/',
      element: <Navigate to="/home" />
    }
  ])

  return (
    <div>
      <NavLink to='/home'>Home</NavLink> | <NavLink to='/about'>About</NavLink>
      <hr />
      {/* 注册路由 */}
      { routeElement }
    </div>
  )
}

2.2 嵌套路由

在路由表添加children属性即可

const routeElement = useRoutes([
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />,
    children: [
      {
        path: 'news',
        element: <div>news</div>
      },
      {
        path: 'message',
        element: <div>message</div>
      }
    ]
  },
  {
    path: '/',
    element: <Navigate to="/home" />
  }
])

在About组件中，需要一个路由出口，用Outlet来展示二级子路由

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function index() {
  return (
    <div>About
      <br />
      {/* v5写法 */}
      <NavLink to="/about/news">news</NavLink> | <NavLink to="/about/message">message</NavLink>
      {/* v6中：同v5，也可以只写子路由路径，但是不能带斜杠，类似于vue */}
      <NavLink to="news">news</NavLink> | <NavLink to="message">message</NavLink>
      {/* 路由出口 */}
      <Outlet />
    </div>
  )
}

2.3 useParams()（获取params参数）

useParams()获取传递的params参数

import { useParams } from 'react-router-dom'

2.4 useMatch()（获取params参数）

useMatch同useParams都可以用来读取params参数

使用：useMatch('/home/:id/:title')

2.5 useSearchParams()（获取search参数）

useSearchParams用来获取search(query)参数，返回的是一个数组

searchParams：获取到search参数，但是需要通过get()方法获取

// 我的url为http://localhost:5173/about/news?id=1&title=haha
const [searchParams, setSearchParams] = useSearchParams()
// 需要通过get方法，传入key，获取到value
let id = searchParams.get('id'))

setSearchParams：更改search参数

setSearchParams('id=2&title=hello')

2.6 useLocation()（获取search、state参数）

获取search参数：

useLocation同useSearchParams都可以获取search参数，不用像useMatch那样传递路径。

获取state参数：

传递state参数（隐式传参）：

{/* v5写法 */}
<NavLink to={{ pathname: '/home', state: {name: 'xiaotian', age: 20} }}>Home</NavLink>
{/* v6写法 */}
<NavLink to='/home' state={{ name: 'xiaotian', age: 20 }}>Home</NavLink>

使用：useLocation()

// 对象的连续解构
const { state: {name, age} } = useLocation()

2.7 路由传参总结

params => useParams、useMatch

search(query) => useSearchParams、useLocation

state => useLocation

2.8 编程式路由导航

let navigate = useNavigate()
// 1. 基本使用
navigate('/about')
// 2. 子路由
navigate('news')
// 3. 传递state参数
navigate('news', {
  replace: false,
  state: {
    name: 'xiaotian',
    age: 20
  },
})
// 4. 前进
navigate(1)
// 5. 后退
navigate(-1)

2.9 useInRouterContext()

作用：用于判断组件是否被路由包裹着
返回值：boolean

2.10 useNavigationType()

作用：返回当前的导航类型（用户是如何来到当前页面的）
返回值：pop、push、replace
备注：pop是指直接在浏览器中打开了这个路由组件（复制链接、刷新进入）

2.11 useOutlet()

作用：用来呈现当前组件中渲染的嵌套路由
返回值：如果嵌套路由没有挂载，则res返回null；如果嵌套路由已经挂载，则展示嵌套路由对象。

let res = useOutlet()

2.12 useResolvedPath

作用：给定一个url值，解析其中的path、search、hash值。

三、项目中如何配置路由表(v6版本)

1. 标签形式

在src下创建router目录，新建index.jsx

这里用到了嵌套路由的写法

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import App from '../App'
import Home from '../views/Home/Home'
import About from '../views/About/About'

const baseRouter = () => {
    return (
        <BrowserRouter>
            <Routes>
            	{/* 嵌套路由写法 */}
                <Route path='/' element={<App />}>
                    <Route path='/home' element={<Home />}></Route>
                    <Route path='/about' element={<About />}></Route>
                </Route>
            </Routes>
        </BrowserRouter>
    )
}

export default baseRouter

在main.jsx中将原有的App根组件替换成路由表组件

import ReactDOM from 'react-dom/client'
import BaseRouter from './router/index.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BaseRouter />,
)

在App.jsx中配置路由出口

import { Outlet } from 'react-router-dom'

export default function App() {
  return (
    <div>
      {/* 占位符，用于展示组件，类似于vue的router-view（路由出口） */}
      <Outlet />
    </div>
  )
}

2. Hook形式

2.1 基本使用

在src下创建router目录，新建index.jsx

import { Navigate } from 'react-router-dom'
import Home from '../views/Home/Home'
import About from '../views/About/About'

const routes = [
    // 当App组件使用了useRoutes渲染路由时，就不允许在路由表中配置App组件有关的路由
    // 错误写法：会导致页面不停渲染，最终卡死
    // {
    //     path: '/',
    //     element: <App />
    // },
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/about',
        element: <About />
    },
    // 错误页面，重定向到404
    {
        path: '*',
        element: <Navigate to="/404" />
    }
]

export default routes

在main.jsx中用BrowserRouter或HashRouter包裹一下根组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

在App.jsx中渲染路由

import { useRoutes } from 'react-router-dom'
import router from './router'

export default function App() {
  const outlet = useRoutes(router)
  return (
    <div>
    	// 渲染路由
      	{ outlet }
    </div>
  )
}

2.2 路由懒加载

在router/index.jsx中，使用lazy即可实现路由的懒加载

import { lazy } from 'react'

const Home = lazy(() => import('../views/Home/Home'))

但是通常情况下，lazy和Suspense是结合使用的，不然会出现报错（但是我目前写lazy没有出现报错），可以通过如下代码书写我们的懒加载路由：

import { lazy, Suspense } from 'react'
import { Navigate } from 'react-router-dom'

const Home = lazy(() => import('../views/Home/Home'))
const About = lazy(() => import('../views/About/About'))

const routes = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: '/home',
        element: (
            // 当路由很多时，书写这段代码会显得非常繁琐，可以封装一个withLoadingComponent方法
            <Suspense fallback={<div>loading...</div>}>
                <Home />
            </Suspense>
        )
    },
    {
        path: '/about',
        element: withLoadingComponent(<About />),
    }
]

// comp的ts类型为JSX.Element
const withLoadingComponent = (comp) => {
    return (
        <Suspense fallback={<div>loading...</div>}>
            { comp }
        </Suspense>
    )
}

export default routes

2.3 嵌套路由

路由表通过children属性可以书写子路由，但是子路由并不会直接展示在页面上，需要通过在展示子路由的页面上放置路由出口<Outlet />

路由表配置：

const routes = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/about',
        element: <About />,
        // 子路由
        children: [
            {
                path: '/about/news',
                element: <News />
            }
        ]
    }
]

路由出口：（在About组件内）

import React from 'react'
import { Outlet } from 'react-router-dom'

export default function about() {
  return (
    <div>
      about
      <Outlet />
    </div>
  )
}