1. searchParams 传参

// @/page/Login/index.js
import { 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.js
import { 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.js
import { 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.js
import { 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.js
import 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