【React-Router】导航传参,闻尚i1s

文件名：【React-Router】导航传参,闻尚i1s 【React-Router】导航传参 1. searchParams 传参 // @/page/Login/index.jsimport { Link, useNavigate } from 'react-router-dom'const Login = () => {const navigate = useNavigate()return <div>登录页<button onClick={() => navigate('/article?id=91&name=jk')}>searchParams 传参</button></div>}export default Login // @/page/Article/index.jsimport { useSearchParams } from "react-router-dom";const Article = () => {const [params] = useSearchParams();const id = params.get('id');const name = params.get('name');return <div>文章页,接收参数{id}-{name}</div>}export default Article

2. params 传参 // @/page/Login/index.jsimport { Link, useNavigate } from 'react-router-dom'const Login = () => {const navigate = useNavigate()return <div>登录页<button onClick={() => navigate('/article/91/jk')}>Params 传参</button></div>}export default Login // @/page/Article/index.jsimport { useParams, useSearchParams } from "react-router-dom";const Article = () => {const params = useParams()const id = params.idconst name = params.namereturn <div>文章页,接收参数{id}-{name}</div>}export default Article // @/router.index.jsimport Login from '../page/Login'import Article from '../page/Article'import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([{path: '/login',element: <Login></Login>},{// `/:id/:name` 占位符path: '/article/:id/:name',element: <Article></Article>},{path: '/',element: <Login></Login>}])export default router