React Router6的用法

蒋承教

2023-12-01

一、 BrowserRouter

作用： 用于包裹整个应用

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

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

二、 HashRouter

作用： 同BrowserRouter，但 HashRouter修改的是地址栏的Hash值

三、 Routes 与 Route

V6	V5
Routes	Switch
<Route element={<Home/>}/>	<Route component={Home}/>

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

四、 Link

作用： 修改URL，且不发送网络请求（路由链接）

<Link to="/路径">按钮</Link>

五、 NavLink

作用： 同Link，且可实现导航高亮效果(默认高亮类名为active）

自定义高亮样式
V6：

<NavLink className={(isActiveObj)=>isActiveObj.isActive ? 'box custom-active' : 'box'} to='/home'>Home</NavLink>
/*
    默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
    当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
*/
<NavLink to="home" end >home</NavLink>

V5：

<NavLink activeClassName='custom-active' className="box" to='/home'>Home</NavLink>

六、 Hooks

1、useRoutes()

作用： 根据路由表，动态创建和。
路由表配置：src/routes/index.js

import About from '../pages/About'
import Home from '../pages/Home'
import Message from "../pages/Message"
import {Navigate} from 'react-router-dom'

export default [
    {
        path:'/about',
        element:<About/>
    },
    {
        path:'/home',
        element:<Home/>
        children: [
        {
          path: 'message',
          element: <Message/>,
        }
      ]
    },
    {
        path:'/',
        element:<Navigate to="/about"/>
    }
]

App.jsx

import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'

export default function App() {
    //根据路由表生成对应的路由规则
    const element = useRoutes(routes)
    return (
        <div>
            ......
      {/* 注册路由 */}
      {element}
          ......
        </div>
    )
}

2、useNavigate()

作用： 返回一个函数用来实现编程式导航。

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

export default function Demo() {
  const navigate = useNavigate()
  const handle = () => {
    //第一种使用方式：指定具体的路径
    navigate('/login', {
      replace: false,
      state: {a:1, b:2}
    }) 
    //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法
    navigate(-1)
  }

  return (
    <div>
      <button onClick={handle}>按钮</button>
    </div>
  )
}

3、useParams()

作用： 获取当前匹配路由的params参数，类似于5.x中的match.params

3.1、向路由组件传递params参数

<Link to={'/home/message/tom/18'}>标签体内容</Link>

3.1、声明接收params参数
在路由文件中声明接收

{
  path: '/home',
  element: <Home/>,
  children: [
    {
      path: 'message/:name/:age',
      element: <Message/>
    },
  ]
},

3.1、路由组件接收参数

const {name, age} = useParams()

4、useSearchParams()

作用： 用于读取和修改当前位置的 URL 中的查询字符串。
说明： 返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

4.1、向路由组件传递search参数

<Link to={'/home/message/detail/?name=tom&age=18'}>标签体内容</Link>

4.2、路由组件接收参数

export default function Message() {
    const [search,setSearch] = useSearchParams()
    const name = search.get('name')
    const age = search.get('age')
    return (
        <div>
            <button onClick={()=>setSearch('name=jack&age=27')}>点我更新searchParams参数</button>
            <li>{name}--{age}</li>
        </div>
    )
}

5、useLocation()

作用： 获取当前 location 信息，对标5.x中的路由组件的location属性。

5.1、向路由组件传递state参数

<Link 
    to="detail"
    state={{
        name: 'tom',
        age: 20,
    }}
>姓名：tom</Link>

5.2、路由组件接收参数

const {state:{id,title,content}} = useLocation()

location对象: (也可以接收search参数)

 {
      hash: "",
      key: "ah9nv6sz",
      pathname: "/login",
      search: "?name=zs&age=18",
      state: {name: tom, age: 20}
}

6、useMatch()

作用： 返回当前匹配信息，对标5.x中的路由组件的match属性。

 ```jsx
   <Route path="/login/:page/:pageSize" element={<Login />}/>
   <NavLink to="/login/1/10">登录</NavLink>

   export default function Login() {
     const match = useMatch('/login/:x/:y')
     console.log(match) //输出match对象
     //match对象内容如下：
     /*
         {
         params: {x: '1', y: '10'}
         pathname: "/LoGin/1/10"  
         pathnameBase: "/LoGin/1/10"
         pattern: {
             path: '/login/:x/:y', 
             caseSensitive: false, 
             end: false
         }
       }
     */
     return (
         <div>
         <h1>Login</h1>
       </div>
     )
   }

7、useInRouterContext()

作用：判断是否处于路由的上下文环境

8、useNavigationType()

作用： 返回当前的导航类型（用户是如何来到当前页面的）。
返回值： POP、PUSH、REPLACE
备注： POP是指在浏览器中直接打开了这个路由组件（刷新页面）。

9、useOutlet()

作用：用来呈现当前组件中渲染的嵌套路由。

const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

10、useResolvedPath()

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

七、 Outlet

作用： 当产生嵌套时，渲染其对应的后续子路由。

//根据路由表生成对应的路由规则
const element = useRoutes([
  {
    path:'/about',
    element:<About/>
  },
  {
    path:'/home',
    element:<Home/>,
    children:[
      {
        path:'news',
        element:<News/>
      },
      {
        path:'message',
        element:<Message/>,
      }
    ]
  }
])

//Home.js
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

export default function Home() {
    return (
        <div>
            <h2>Home组件内容</h2>
            <div>
                <ul className="nav nav-tabs">
                    <li>
                        <NavLink className="list-group-item" to="news">News</NavLink>
                    </li>
                    <li>
                        <NavLink className="list-group-item" to="message">Message</NavLink>
                    </li>
                </ul>
                {/* 指定路由组件呈现的位置 */}
                <Outlet />
            </div>
        </div>
    )
}