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: 注意点：子页面路由遵循父页面路由同源，父：/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}
}
通过 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;
返回上一个页面
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 (
登录页面
)
}
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 (
首页
{
user.id ? 你好！{user.name} :
}
);
}
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 (
关于我们
id: {id}
)
}
export default About;
params传参 (restful格式)
路由定义参数值
{
path: "detail/:id",
element: 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 (
关于我们 - 详情
id:{params.id}
)
}
export default AboutDetail;