React-Router 路径传参

params传参

路由配置 '/path/:params1/:params2'

import { createBrowserRouter } from "react-router-dom"
import Article from '../pages/article/index'

const router = createBrowserRouter([
  ...
  {
    path: '/article/:id/:author',
    element: <Article></Article>
  },
])

路由传参 '/path/params1/params2'

// params 传参
navigate('/article/1001/easyluo')

获取路由params参数 const params = useParams()

• params 是一个对象，键为路由配置中冒号后面的字段，值为传入的参数。

import { useParams } from "react-router-dom"

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

  console.log('params', params);

  return (
    <>
      <div>这是文章页Article</div>
    </>
    
  )
}

export default Article

search传参

路由配置 /path （无需声明参数）

import { createBrowserRouter } from "react-router-dom"
import Login from '../pages/login/index'

const router = createBrowserRouter([
   ...
  {
    path: '/login',
    element: <Login />
  },
])

export default router

路由传参 /path?params=value1&params=value2

const jumpLogin = () => {
    navigate('/login?type=1&from=friend')
}

获取路由search参数 const [searchParams] = useSearchParams()

• searchParams 是一个 URLSearchParams 对象，可以通过 searchParams.get('params') 来获取参数值。

import { useSearchParams } from "react-router-dom"

const Login = () => {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  console.log('searchParams', searchParams)
  console.log('typeof searchParams', typeof searchParams)
  console.log("searchParams.get('type')", searchParams.get('type'))
  console.log("searchParams.get('from')", searchParams.get('from'))

  return (
    <>
      <div>这是文章页Login</div>
    </>
    
  )
}

export default Login

state传参

路由配置 /path （无需声明参数）

import { createBrowserRouter } from "react-router-dom"
import Publish from "../pages/publish"

const router = createBrowserRouter([
  ...,
  {
    path: '/publish',
    element: <Publish></Publish>
  }
])

export default router

路由传参 navigate('/path', { state: { params1: value, params: value2 }})

const jumpPublish = () => {
    // state 传参
    navigate('/publish', {state: {type: 'edit', id: 1001}})
}

获取路由 state 参数 const stateParams = useLocation()

• stateParams 是一个对象；
• stateParams.state 也是一个对象；
• 刷新页面后，路由的 state 参数会消失。

import { useNavigate, useLocation } from "react-router-dom"

const Publish = () => {
  const navigate = useNavigate()
  const stateParams = useLocation()

  console.log('stateParams', stateParams)
  console.log('stateParams.state', stateParams.state)

  return (
    <>
      <div>这是文章页Publish</div>
    </>
    
  )
}

export default Publish