React Router6 变化

React Router 6 变化

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

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

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

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

…

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(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

HashRouter(相比V5没有变化)

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

Route和Routes

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

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

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

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

重定向: }>

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

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

示例代码

<Routes>
    <Route to="/home" elements={<Home />}></Route>
    
    // 用于定义嵌套路由
	<Route to="/about" elements={<About />}>
    	<Route to="/news" element={<News />}></Route>
        <Route to="/messahes" element={<Messages />}></Route>
    </Route>
    
    // Route也可以不写element属性,用于展示嵌套的路由,对应的路由应该是/admin/user
    <Route to="/admin">
        <Route to="/user" element={<User />}></Route>
    </Route>
</Routes>

Link和NavLink

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

示例代码

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

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 (
    <div>
        <h1>This is Demo Component</h1>
        {/* 根据sum的值决定是否切换视图 */}
        {
            sum === 1 ? <h4>sum的值为{sum}</h4> : <Navigate to="/home" replace={true} />
        }
        <button onClick={() => setSum(2)}>点击将sum变成2</button>
    </div>
  )
}

Outlet

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

示例代码

// 根据路由表生成对应的路由规则
const element = useRoutes([
    {
        path: "/about",
        element: <About />
      },
      {
        path: "/home",
        element: <Home />,
        children: [
          {
            path: "news",
            element: <News />
          },
          {
            path: "messages",
            element: <Messages />
          }
        ]
      },
      {
        path: "/",
        element: <Navigate to="/about" />
      }
])
// Home组件
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>
                    {/* 直接写二级路由名称(自己自动匹配当前组件的一级路由/home) */}
                    <NavLink className="list-group-item" to="news">News</NavLink>
                  </li>
                  <li>
                    {/*@ 如果给当前NavLink添加end属性,那么当选中子路由NavLink的时候,父级菜单的选项就不会高亮了 */}
                    <NavLink className="list-group-item" end to="messages">Message</NavLink>
                  </li>
                </ul>
                {/* 指定路由组件呈现的位置 */}
                <Outlet />
              </div>
            </div>
  )
}

Hooks useRoutes()

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

示例代码

// 根据路由表生成对应的路由规则
// /src/routes/index.js
export default [
    {
        path: "/about",
        element: <About />
      },
      {
        path: "/home",
        element: <Home />
      },
      {
        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 elements = useRoutes(routes); // routes为路由表
  
  return (
    <div className='app'>
      <div className="row">
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
          {/* 路由链接 */}
          {/* isActive: true 是否被选中 */}
          {/* 如果isActive为true(被选中),展示高亮效果 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {elements}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

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 (
        <div>
            <button onClick={showClick}>点我跳转</button>
        </div>
    )
}

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 (
        <div>
        	// 展示传过来的参数id
            <p>My id is {id}</p>
        </div>
    )
}

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 (
        <div>
            {id}-{title}-{content}
        </div>
    )
}

useLocation()

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

示例代码:

<Link 
	to="detail"
	state={{
       	id: item.id,
       	title: item.title,
       	content: item.content
    }}
> {item.title} </Link>
> 
// 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 (
        <div>
            {id}-{title}-{content}
        </div>
    )
}

useMatch()

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

示例代码

<Route path="detail/:id/:title/:content" element={<Detail />} />
<NavLink to="detail/001/message/detail">登录</NavLink>

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 (
        <div>
        	// 展示传过来的参数id
            <p>My id is {id}</p>
        </div>
    )
}
/*
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'}