React Router 6

变化

与React Router 5.x相比,6.x改变了什么

1. 内置组件的变化: 移除了,新增了等

2. 语法的变化: component={About}变成了element={}

3. 新增多个hook: useParams,useNavigate,useMatch等

4. ......

Component

BrowserRouter(相比V5没有变化)

BrowserRouter用于包裹整个应用

示例代码

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

HashRouter(相比V5没有变化)

作用与BrowserRouter一样,但是HashRouter修改的是地址栏的hash值

Route和Routes

1. V6版本移除了之前的Switch,引入了新的替代者Routes

2. Route和Routes配合使用,所有的路由Route都必须被包裹在中

3. Route相当于一个if语句,如果其路径与当前的URL匹配,则呈现相对应的组件

4. 路由组件的引入方式: }>

5. 重定向: }>

6. 树形用于指定: 匹配时是否区分大小写(默认为false)

7. 也可以嵌套使用,并且可以配合useRoutes()配置路由

示例代码

    }>
    
    // 用于定义嵌套路由
	}>
    	}>
        }>
    
    
    // Route也可以不写element属性,用于展示嵌套的路由,对应的路由应该是/admin/user
    
        }>
    

Link和NavLink

作用: 与组件相似,且可以实现导航的高亮功能

示例代码

// 自定义高亮效果并应用到NavLink上
 {
        return isActive ? "base active" : "base"
    })
>Home

Navigate *

作用: 只要Navigate组件被渲染,就会修改路径,切换视图

replace属性用于控制跳转模式(push或者replace,默认是push)

示例代码

import React, {useState} from 'react'
import { Navigate } from 'react-router-dom'

export default function Demo() {
    const [sum,setSum] = useState(1); 
  return (
    

        
This is Demo Component
        {/* 根据sum的值决定是否切换视图 */}
        {
            sum === 1 ? 
sum的值为{sum}
 : 
        }
         setSum(2)}>点击将sum变成2
    
  )
}

Outlet

当产生嵌套的时候,渲染其对应的后续子路由

示例代码

// 根据路由表生成对应的路由规则
const element = useRoutes([
    {
        path: "/about",
        element: 
      },
      {
        path: "/home",
        element: ,
        children: [
          {
            path: "news",
            element: 
          },
          {
            path: "messages",
            element: 
          }
        ]
      },
      {
        path: "/",
        element: 
      }
])
// Home组件
import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Home() {
  return (
    

              
Home组件内容
              

                

                  

                    {/* 直接写二级路由名称(自己自动匹配当前组件的一级路由/home) */}
                    News
                  
                  

                    {/*@ 如果给当前NavLink添加end属性,那么当选中子路由NavLink的时候,父级菜单的选项就不会高亮了 */}
                    Message
                  
                
                {/* 指定路由组件呈现的位置 */}
                
              
            
  )
}

Hooks

useRoutes()

作用: 根据路由表,动态创建和

示例代码

// 根据路由表生成对应的路由规则
// /src/routes/index.js
export default [
    {
        path: "/about",
        element: 
      },
      {
        path: "/home",
        element: 
      },
      {
        path: "/",
        element: 
      }
]
// App.jsx
import React from 'react'
import {NavLink, useRoutes } from "react-router-dom";
import routes from "./routes"

export default function App() {
  const elements = useRoutes(routes); // routes为路由表
  
  return (
    

      

      
      

        

          

          {/* 路由链接 */}
          {/* isActive: true 是否被选中 */}
          {/* 如果isActive为true(被选中),展示高亮效果 */}
            About
            Home
          
        
        

          

            

              {/* 注册路由 */}
              {elements}
            
          
        
      
    
  )
}

useNavigate() *

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

示例代码:

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

export default function Detail() {
    const navigate = useNavigate();
    const showClick = () => {
        navigate("/about", {
            replace: false,
            state: {name:"Tom",age:20}
        });
        // 二级及以上的路由路径前面不需要添加'/'
        /*
        navigate("detail",{
            replace: false,
            state: {}
        })
        */
    }

    return (
        

            点我跳转
        
    )
}

useParams()

作用: 接受当前匹配路由的params参数,类似于5.x中的match.params

示例代码:

import React from 'react'
//@ useParams 获取路由跳转带过来的参数
import { useMatch, useParams } from 'react-router-dom'

export default function Detail() {
    //@ params
    // 路径设置为path: "detail/:id/:title/:content"
    const { id } = useParams();
    const path = useMatch("/home/messages/detail/:id");
    console.log(path);

    return (
        

        	// 展示传过来的参数id
            
My id is {id}
        
    )
}

useSearchParams()

作用: 用于读取和修改当前位置的URL中的查询字符串

返回一个包含两个值的数组,内容分别为: 当前的search参数,更新的search参数

示例代码:

import React from 'react'
import { useSearchParams, useLocation } from 'react-router-dom';

/**
 * @ params useMatch useParams
 * @ query useSearchParams useLocation
 * @ state useLocation
 */

export default function Detail() {
    // @ query
    // Route路径写为 to={`detail?id=${item.id}&title=${item.title}&content=${item.content}`}
    let [search] = useSearchParams();
    // let [search,setSearch] = useSearchParams();
    let id = search.get("id");
    let title = search.get("title");
    let content = search.get("content");
    console.log(useLocation());

    return (
        

            {id}-{title}-{content}
        
    )
}

useLocation()

作用: 获取当前lication信息,对标5.x中的路由组件的location属性

示例代码:

 {item.title} 
> 
// Detail.jsx
import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom';

/**
 * @ params useMatch useParams
 * @ query useSearchParams useLocation
 * @ state useLocation
 */

export default function Detail() {
    //@ state
    // 连续解构
    const {state:{id,title,content}} = useLocation(); 
    const navigate = useNavigate();

    return (
        

            {id}-{title}-{content}
        
    )
}

useMatch()

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

示例代码

} />
登录

import React from 'react'
//@ useParams 获取路由跳转带过来的参数
import { useParams } from 'react-router-dom'

export default function Detail() {
    const path = useMatch("/home/messages/detail/:id");
    console.log(path);

    return (
        

        	// 展示传过来的参数id
            
My id is {id}
        
    )
}
/*
message对象内容如下:
{
    params: {id: '002', title: 'Message002', content: '汗滴禾下土'}
    pathname: "/home/messages/detail/002/Message002/%E6%B1%97%E6%BB%B4%E7%A6%BE%E4%B8%8B%E5%9C%9F"
    pathnameBase: "/home/messages/detail/002/Message002/%E6%B1%97%E6%BB%B4%E7%A6%BE%E4%B8%8B%E5%9C%9F"
    pattern: {path: '/home/messages/detail/:id/:title/:content', caseSensitive: false, end: true}
    [[Prototype]]: Object
}
*/

useInRouterContext()

作用: 如果组件在的上下文中呈现,则useInRouterContext钩子返回true,否则返回false

当当前组件脱离了路由器的管理,就会返回false

useNavigationType()

作用: 返回当前的导航类型(用户是如何来到当前页面的)

返回值: POP,PUSH,REPLACE

备注: POP是指在浏览器中直接打开了这个路由组件(直接打开or刷新之后)

示例代码

import {useNavigationType} from "react-router-dom";
...
console.log(useNavigationType());
// 输出POP/PUSH/REPLACE

useOutlet()

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

示例代码

import {useOutlet} from "react-router-dom";
...
const result = useOutlet();
console.log(result);
// 如果嵌套路由没有挂载,则result的值为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

useReslovePath()

作用: 给定一个URL值,解析其中的path,search,hash值

示例代码

import {useReslovePath} from "react-router-dom"
...
console.log(useResolvedPath("/user?id=001&name=tom#que"));
// {pathname: '/user', search: '?id=001&name=tom', hash: '#que'}