react带参跳转页面

在React中进行带参跳转页面有两种方式。

第一种方式是使用react-router-dom库中的useSearchParams钩子函数。通过该函数，我们可以获取URL中的查询参数。在Detail组件中，可以使用useSearchParams来获取id和name参数，并展示在页面上。例如：

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

function Detail() {
  const [params] = useSearchParams()
  const id = params.get('id')
  const name = params.get('name')

  return (
    <div>
      Detail路径传的参数id: {id}, name: {name}
    </div>
  )
}

第二种方式是使用react-router-dom库中的useParams钩子函数。通过该函数，我们可以获取URL中的动态路由参数。在Detail组件中，可以使用useParams来获取id参数，并展示在页面上。例如：

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

function Detail() {
  const params = useParams()
  const id = params.id

  return (
    <div>
      Detail路径传的参数id: {id}
    </div>
  )
}