React路由6.x reach-router-dom v6x
React-router-dom
React-router-dom是一个用于React应用程序的客户端路由库，它允许开发者在不重新加载整个页面的情况下呈现不同的组件和视图。
router-router-dom 6.x就是当前react路由的最新版本 在2021年11月发布 已经是路由推荐版本。
React-router-dom v6.x相对于v5.x
React-router-dom v6.x相对于v5.x有一些重要的变化和改进。以下是一些主要的变化：
-
路由定义方式：
在React-router-dom v5.x中，路由是使用
-
导航器钩子：
React-router-dom v6.x将钩子（hooks）重命名为“导航器钩子”，并且重写了它们的实现方式。现在可以使用useRoutes()钩子来定义路由规则，而useNavigate()钩子则可以在代码中进行导航。相对于旧版，这些新钩子更加直观和易于使用。
-
Link组件：
在React-router-dom v5.x中，使用
-
组件传递props：
React-router-dom v5.x中的
注意：官方明确推荐函数组件来进行开发
React-router-dom v6.x路由创建
先安装：通过npm/Yarn安装：
npm install react-router-dom
或
yarn add react-router-dom新建views文件夹 容纳路由页面 新建router文件夹容纳路由配置
import React from 'react'
// 1.引用路由配置
import {Route} from "react-router-dom"
// 2.引用路由页面
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
export default function index() {
return (
<>
{/* 3.设置路由规则 */}
}>
}>
}>
)
}
设置路由配置到全局配置文件中
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// 1.引用路由配置文件
import App from './router';
import {BrowserRouter} from "react-router-dom"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
运行之后发现如下错误
Uncaught Error: A is only ever to be used as the child of element,
never rendered directly. Please wrap your in a .
错误是说Route组件不能直接渲染 必须用一个Routes组件进行包裹使用 注意在V6版本中 Routes就是V5版本的Switch组件
import React from 'react'
// 引用Routes
import {Route,Routes} from "react-router-dom"
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
export default function index() {
return (
<>
{/* 使用唯一渲染 */}
}>
}>
}>
)
}运行应用
npm start
路由导航
声明式Link与NavLink方式进行跳转
home
phone
shop
或者
home
phone
shop 修改NavLink默认类名：NavLink默认选中类名为active 如果想修改 还是使用className来修改里面传入回调函数
import React from 'react'
import {NavLink} from "react-router-dom"
export default function Demolink() {
return (
isActive?'xiaoming':''}>home
isActive?'xiaoming':''}>phone
isActive?'xiaoming':''}>shop
)
}
编程式使用 useNavigate()来完成
import React from 'react'
// 1.引用
import {useNavigate} from "react-router-dom"
export default function Demolink() {
// 2.调用
let navigate=useNavigate()
let fun=()=>{
// 3.使用
navigate("/home")
}
return (
)
}路由重定向
在React Router v6.x中，可以使用
import { Navigate } from 'react-router-dom';
然后，可以在路由组件中使用
例如，我们设置默认导航为首页
import React from 'react'
import {Route,Routes,Navigate} from "react-router-dom"
import Home from "../views/Home.jsx"
import Phone from "../views/Phone.jsx"
import Shop from "../views/Shop.jsx"
export default function index() {
return (
<>
}>
}>
}>
{/* 设置路由重定向 */}
)
} 注意，在使用to属性设置为重定向的目标路径，并使用replace属性替换当前的历史记录。
动态路由匹配（路由传参）
params
配置接受参数：
}> 发送：
import React from 'react'
import { useNavigate } from "react-router-dom";
export default function Shop() {
let navigate = useNavigate();
let fun=()=>{
// 发送
navigate('/phone/我是参数')
}
return (
shop
)
}接收：useParams
import React from 'react'
import { useEffect } from 'react';
// 通过useParams接受路由传值
import { useParams } from "react-router-dom";
export default function Phone() {
const params = useParams();
// js接收
useEffect(()=>{
console.log(params.id)
},[])
return (
{/* 页面接收 */}
phone--{params.id}
)
}params传参特点：参数会在url后面拼接传递 localhost:xx/phone/我是参数，且刷新不丢失
search方式
发送：
import React from 'react'
import { useNavigate,Link} from "react-router-dom";
export default function Shop() {
let navigate = useNavigate();
let fun=()=>{
// 发送
navigate('/phone?id=999&key=val&key=val')
}
return (
shop
{/* 声明式发送方式 */}
Child
)
}接收：
import React from 'react'
import { useEffect } from 'react';
// 通过useSearchParams接受路由传值
import { useSearchParams } from "react-router-dom";
export default function Phone() {
// 返回数组长度为2的数据 第一个为传递过来的数据 第二个是修改传递过来的数据
const [searchParams, setSearchParams] = useSearchParams();
// js接收
useEffect(()=>{
console.log(searchParams.get("id"))
},[])
return (
{/* 页面接收 */}
phone--{searchParams.get('id')}
)
}修改接收的路由参数---在有的项目里面 点击随便看看类似的功能 ：
import React from 'react'
import { useEffect } from 'react';
// 通过useSearchParams接受路由传值
import { useSearchParams } from "react-router-dom";
export default function Phone() {
// 返回数组长度为2的数据 第一个为传递过来的数据 第二个是修改传递过来的数据
const [searchParams, setSearchParams] = useSearchParams();
useEffect(()=>{
console.log(searchParams.get("id"))
},[])
return (
phone--{searchParams.get('id')}
{/* // 同时页面内也可以用第二个参数方法来改变路由 */}
)
}特点：参数会在url后面拼接传递 localhost:xxxx/phone?id=2 并且刷新不丢失
路由懒加载
React Router v6支持路由懒加载，以提高应用程序的性能和减少初始加载时间。
在React Router v5中，使用React.lazy和Suspense包裹路由组件来实现懒加载，但在React Router v6中有所不同。
下面是在React Router v6中使用路由懒加载的示例：
安装@loadable/component模块：
npm install @loadable/component
使用loadable来导入需要懒加载的路由组件：
import { loadable } from '@loadable/component';
const Home = loadable(() => import('./Home'));
const About = loadable(() => import('./About'));
const Contact = loadable(() => import('./Contact'));
在Route组件中使用路由组件：
import { Router, Route } from 'react-router-dom';
这样就可以实现路由懒加载。当访问相应的路由时，对应的组件将会被加载。