React Router路由的使用
一、下载
//js和ts均适用
npm i --save react-router-dom @types/react-router-dom二、使用
在react-router-dom中引入RouterProvider和createBrowserRouter，createBrowserRouter函数中是一个数组，数组的元素都是对象，里面保存的是路由信息，最重要的两个属性是path和element。path 是一个字符串类型的属性，它指定了当前路由规则所匹配的 URL 地址。可以使用占位符、可选参数和正则表达式来描述路由规则。element是一个 React 组件的属性，它指定了当前路由规则要渲染的组件。数组的最后配置一个“/*”的路由，功能是输入了注册路由以外的地址都与这个路由匹配，显示这个路由对应的组件。
createBrowserRouter 和 RouterProvider 是用来创建和提供 BrowserRouter 对象的两个帮助函数。 BrowserRouter 是 React Router 中定义路由的核心对象，它负责处理历史记录、跳转链接、按钮等事件，并根据当前 URL 匹配路由规则来加载相应的 element 组件。RouterProvider 则是一个 React 组件，它可以将 BrowserRouter 对象注入到 React 组件树中，并使得整个 React 应用都能访问和使用 BrowserRouter。
三、路由跳转
在用户的使用中，不可能说是去地址栏输入路由地址，而是点击某一个控件来进行跳转，这就需要在路由间进行跳转以实现页面的切换。
在指定路由的渲染组件时，可以导入组件后，将组件作为element的值，这种情况在组件较多时性能不太好，因为用户可能只浏览了其中几个，但却全部组件都导入去运行了一遍，就做了无用功，这时候可以使用懒加载，根据路由情况进行导入。
//路由部分
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from "./App"
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
let load = (Com)=>Loading... 
但懒加载的的结果不能直接作为element的属性，需要自定义函数处理一下返回一个jsx对象。但这个对象还要用react的Suspense组件包起来，否则在进行路由跳转时会出现上述图中的错误。React.Suspense 是 React 16.6 版本中引入的一个组件，它主要用来解决组件懒加载的问题。接受一个 fallback 属性，它表示在等待被等待的组件加载完成时，需要渲染的 fallback 界面，通常是一个加载中的动画或者占位符。
React路由跳转与Vue的路由跳转类似，都有两种：使用标签跳转，js编程式跳转。 Link 组件和 useNavigate 钩子函数都是 React Router 中用于实现导航的功能工具，Link 组件适用于在 JSX 中创建导航链接，而 useNavigate 适用于在组件内部进行编程式导航。
import React from 'react'
import { Link,useNavigate } from 'react-router-dom'
export default function App() {
let nav = useNavigate()
let fn = ()=>{
nav('detail')
}
let fm = ()=>{
nav({pathname:'discovery'})
}
return (
所有商品
{/* 1、Link标签跳转 */}
前往详情页
前往发现页
前往登录页
{/* 2、编程式跳转 */}
)
}
四、路由传值
1、Link标签
可以路由后面直接问号拼接，或者pathname所在的对象再添加一个属性search，值是字符串类型，问号可写可不写，浏览器会自动在地址栏补全。
2、编程式传值
路由后面直接问号拼接；接收useNavigate函数的返回值的变量传第一个参数对象，state属性的值为对象类型，里面为要传的值；pathname所在的对象中再添加一个属性search，值为字符串，问号加上要传的值；动态路由传参，斜杠接传的值，动态路由注册时path不一样——“path:'/discovery2/:dt'”，dt属性自定义，值为传的值。
import React from 'react'
import { Link,useNavigate } from 'react-router-dom'
export default function App() {
let nav = useNavigate()
let fm = ()=>{
// state传参：传的值保存在useLocation().state中
// nav({pathname:'discovery'},{state:{name:'tom'}})
nav('discovery?name=tom&age=23')
// query传参（查询传参）：传的值保存在useLocation().search中
// nav({pathname:'discovery',search:'?name=tom&age=21'})
// 动态路由传参：传的值保存在useParams中
// nav({pathname:'discovery2/2024'})
}
return (
前往详情页
{/* 直接问号拼接---------传的值保存在useLocation().search中 */}
前往发现页
{/* 再加一个属性search，值为字符串，问号可有可不有，浏览器会在地址栏自动补上 */}
前往登录页
)
}
获取路由信息要引入useLocation钩子函数，钩子的返回值中有路由相关信息。传的值要么保存在search属性中，要么在state属性中。如果是动态路由，则是另一个钩子函数useParams。
