• react-router-dom 实用技巧及3种传参方式

    介绍

    在传统网站中，浏览器从 Web 服务器请求文档，下载并评估 CSS 和 JavaScript 资源，并呈现从服务器发送的 HTML。当用户单击链接时，它会在新页面上重新启动该过程。

    客户端路由允许您的应用程序通过链接点击更新 URL，而无需从服务器再次请求另一个文档。相反，您的应用程序可以立即呈现一些新的 UI 并发出数据请求，以fetch使用新信息更新页面。

    这可以实现更快的用户体验，因为浏览器不需要请求全新的文档或重新评估下一页的 CSS 和 JavaScript 资源。它还通过动画等方式实现更动态的用户体验。

    安装

    npm install --save react-router-dom

    • 1

    配置

    src 目录下创建 routers 文件，并创建 index.js 文件

    lazy 懒加载

    import { lazy } from "react"

const Login = lazy(() => import("../pages/Login"))
const Home = lazy(() => import("../pages/Home"))
const About = lazy(() => import("../pages/About/About"))
const Detail = lazy(() => import("../pages/About/AboutDetail"))

export const routers = [
  {
    path: "/login",
    element: 
  },
  {
    path: "/",
    element: 
  },
  {
    path: "/about",
    children: [
      {
        path: "",
        element: ,
      },
      {
        path: "detail/:id",
        element: 
      }
    ]
  },
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    注意点：子页面路由遵循父页面路由同源，父：/about；子：/about/detail

    useRoutes

    App.js

    import { Suspense } from "react"
import { useRoutes } from "react-router-dom"
import { routers } from "./routers"

function App() {
  const element = useRoutes(routers)
  return (
    
    
      {
        loading...
    }>{element}
      }
    ); } export default App;
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    通过 useRoutes 渲染路由树的有效 React 元素

    路由跳转

    useNavigate

    useNavigate 钩子返回一个函数，允许您以编程方式导航

    Home.js

    import React from 'react';
import { useNavigate } from 'react-router-dom'

const Home = () => {

  const navigate = useNavigate()

  const handleLogin = () => {
    navigate('/login')
  }


  return (
    
    
      
    首页
    
      
    
    
  );
}

export default Home;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    返回上一个页面

    navigate(-1)

    • 1

    state传参

    通过 navigate 传值

    navigate 可以接收第二个参数，state: { key: keyValue } ,以向目标页面传递参数

    Login.js

    import React, { useState, useRef, startTransition } from 'react'
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const [value, setValue] = useState('')
  
  const navigate = useNavigate()

  const inputRef = useRef()

  const handleInput = () => {
    startTransition(()=> {
      setValue(inputRef.current.value)
    })
  }

  const handleLogin = () => {
    const id = Date.parse(new Date())
    navigate("/", {
      state: {
        id,
        name: inputRef.current.value
      }
    })
  }

  return (
    
    
      
    登录页面
    
      
    
        
        
      
    
    
    
  )
}

export default Login;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    通过 useLocation 接收

    useLocation 钩子返回当前 location 对象

    Home.js

    import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom'

const Home = () => {
  const [user, setUser] = useState({
    name: '',
    id: ''
  })

  const location = useLocation().state
  const navigate = useNavigate()

  const handleLogin = () => {
    navigate('/login')
  }

  useEffect(() => {
    if (location) {
      setUser(location)
    }
  }, [])

  return (
    
    
      
    首页
    
      {
        user.id ? 
    你好！{user.name}
     : 
      }
      
    
    
  );
}

export default Home;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    search传参 (query格式, ? + &)

    const handleAbout = () => {
    const id = Date.parse(new Date())
    // 写法一
    navigate({
      pathname: "/about",
      search: `?id=${id}`
    })
    // 写法二
    navigate(`/about?id=${id}`)
    // 写法三
    const params = { id: '1', grade: '2' }
    navigate({
        pathname: "/about",
        search: `?${createSearchParams(params)}`
    })
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    通过 useSearchParams 接收

    import React from 'react'
import { useSearchParams, useNavigate } from "react-router-dom"

const About = () => {
  const [searchParams] = useSearchParams()
  const id = searchParams.get("id") || ""

  const navigate = useNavigate()

  return (
    
    
      
    关于我们
    
      id: {id}
      
    
    
  )
}

export default About;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    params传参 (restful格式)

    路由定义参数值

    {
    path: "detail/:id",
    element: 
}

    • 1
    • 2
    • 3
    • 4
      const handleDetail = () => {
    navigate(`/about/detail/${id}`)
  }


    • 1
    • 2
    • 3
    • 4

    AboutDetail.js

    通过 useParams 接收

    import React from 'react'
import { useNavigate, useParams } from "react-router-dom"

const AboutDetail = () => {
  const params = useParams()
  const navigate = useNavigate()

  const handleBlack = () => {
    navigate(-1)
  }

  return (
    
    
      
    关于我们 - 详情
    
      
    id:{params.id}
    
      
    
    
  )
}

export default AboutDetail;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
  • 相关阅读:
    LeetCode141.环形链表
    前端实现图片下载的方法
    探索Netty的EventLoop
    冰冰学习笔记：二叉搜索树
    html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼品电商网站
    spring中12种定义bean的方法，你都知道哪几种？
    Docker概念及安装
    数据库产生“死锁”
    万应案例精选｜抓紧抓实抓细，万应为安全生产全域监管护航
    【数据链路层】网络基础 -- MAC帧协议与ARP协议
  • 原文地址：https://blog.csdn.net/weixin_44872023/article/details/132841774