首页 > 其他分享> 文章详细

React Router6 的变化

2022-05-21 10:31:06 阅读：117 来源： 互联网

标签：react 示例 Router6 React path import 变化 id 路由

React Router 6

变化

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

内置组件的变化: 移除了<Switch />,新增了<Routes />等
语法的变化: component={About}变成了element={<About />}
新增多个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都必须被包裹在<Routes></Routes>中
Route相当于一个if语句,如果其路径与当前的URL匹配,则呈现相对应的组件
路由组件的引入方式: <Route path="/home" element={<Home />}>
重定向: <Route path='/' element={<Navigate to="/home" />}></Route>
<Route caseSensitive>树形用于指定: 匹配时是否区分大小写(默认为false)
<Route>也可以嵌套使用,并且可以配合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>与<Link>组件相似,且可以实现导航的高亮功能

示例代码

// 自定义高亮效果并应用到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

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

示例代码

// 根据路由表生成对应的路由规则
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()

作用: 根据路由表,动态创建<Routes>和<Route>

示例代码

// 根据路由表生成对应的路由规则
// /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()

作用: 如果组件在<Router>的上下文中呈现,则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'}

标签：react,示例,Router6,React,path,import,变化,id,路由
来源： https://www.cnblogs.com/ustinians/p/16294554.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React Router6 的变化

React Router 6

变化

Component

BrowserRouter(相比V5没有变化)

HashRouter(相比V5没有变化)

Route和Routes

Link和NavLink

Navigate *

Outlet

Hooks

useRoutes()

useNavigate() *

useParams()

useSearchParams()

useLocation()

useMatch()

useInRouterContext()

useNavigationType()

useOutlet()

useReslovePath()