Skip to main content

react路由参数获取

params动态路由参数​

<Route path='/a/:name/:age' element={<Page1/>}/>

要想获取动态路由参数，如上例的name和age， 需要用到react-router-dom中的useParams()hook

import { memo } from 'react'
import { useParams } from 'react-router-dom'

const Page1 = memo(() => {
  const {name, age} = useParams()
  return (
    <div>Page1:{name} - {age}</div>
  )
})

export default Page1

查询字符串参数​

 <Route path='/b' element={<Page2/>}/>

query参数，如/b?name=aa&age=12,想获取name和age，有2种方法:

1, 用useSearchParams()hook来解析​

import { memo } from 'react'
import {  useSearchParams } from 'react-router-dom'

const Page2 = memo(() => {
  const [searchParams] = useSearchParams()
  // 根据entries返回一个object对象-把searchParams转成普通对象
  const {name, age} = Object.fromEntries(searchParams)

  return (
    <div>Page2: {name} - {age}</div>
  )
})

export default Page2

推荐使用这种方法

2, 用useLocation()hook来解析​

import {  useLocation } from 'react-router-dom'

思路如下：

    const location = useLocation()
    // console.log(location.search) ?name=scott&age=11
    //你可以拿到seach去解析