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)=><React.Suspense fallback={<div>Loading...</div>}><Com></Com></React.Suspense>
const router = createBrowserRouter([
    {
        path:'/',
        element: <App></App>
    },
    {
        path:'/login',
        element: load(React.lazy(()=>import('./Box1.jsx')))
    },
    {
        path:'/detail',
        element: load(React.lazy(()=>import('./detail.jsx')))
    },
    {
        path:'/discovery',
        element: load(React.lazy(()=>import('./discovery.jsx')))
    },
    {
        path:'/discovery2/:dt',
        element: load(React.lazy(()=>import('./discovery2.jsx')))
    },
    {
        path:'/*',
        element: <div>404 NOt Found</div>
    },
])
ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router} />)

 

        但懒加载的的结果不能直接作为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 (
    <div>
        <h2>所有商品</h2>

        {/* 1、Link标签跳转 */}
        <Link to={'detail'}>前往详情页</Link><br />
        <Link to='discovery'>前往发现页</Link><br />
        <Link to={{pathname:'login'}}>前往登录页</Link><br />

        {/* 2、编程式跳转 */}
        <button onClick={fn}>跳转到详情页</button>
        <button onClick={fm}>跳转到发现页</button>
    </div>
  )
}

四、路由传值

         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 (
    <div>
        <Link to={'detail'}>前往详情页</Link><br />
        {/* 直接问号拼接---------传的值保存在useLocation().search中 */}
        <Link to='discovery?id=13'>前往发现页</Link><br />

        {/* 再加一个属性search，值为字符串，问号可有可不有，浏览器会在地址栏自动补上 */}
        <Link to={{pathname:'login',search:'name="tom"'}}>前往登录页</Link><br />

        <button onClick={fm}>跳转到发现页</button>
    </div>
  )
}

        获取路由信息要引入useLocation钩子函数，钩子的返回值中有路由相关信息。传的值要么保存在search属性中，要么在state属性中。如果是动态路由，则是另一个钩子函数useParams。