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

介绍

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

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

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

安装

npm install --save react-router-dom

配置

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: <Login />
  },
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/about",
    children: [
      {
        path: "",
        element: <About />,
      },
      {
        path: "detail/:id",
        element: <Detail />
      }
    ]
  },
]

注意点：子页面路由遵循父页面路由同源，父：/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 (
    <div className="App">
      {
        <Suspense fallback={<div>loading...</div>}>{element}</Suspense>
      }
    </div>
  );
}

export default App;

通过 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 (
    <div>
      <h1>首页</h1>
      <button onClick={handleLogin}>去登录</button>
    </div>
  );
}

export default Home;

返回上一个页面

navigate(-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 (
    <div>
      <h1>登录页面</h1>
      <div>
        <input ref={inputRef} value={value} onChange={handleInput} />
        <button onClick={handleLogin}>登录</button>
      </div>
    </div>
  )
}

export default Login;

通过 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 (
    <div>
      <h1>首页</h1>
      {
        user.id ? <div>你好！{user.name}</div> : <button onClick={handleLogin}>去登录</button>
      }
      <button onClick={handleAbout}>关于我们</button>
    </div>
  );
}

export default Home;

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)}`
    })
  }

通过 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 (
    <div>
      <h1>关于我们</h1>
      id: {id}
      <button onClick={handleDetail}>详情</button>
    </div>
  )
}

export default About;

params传参 (restful格式)

路由定义参数值

{
    path: "detail/:id",
    element: <Detail />
}

  const handleDetail = () => {
    navigate(`/about/detail/${id}`)
  }

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 (
    <div>
      <h1>关于我们 - 详情</h1>
      <p>id:{params.id}</p>
      <button onClick={handleBlack}>返回</button>
    </div>
  )
}

export default AboutDetail;