react路由组件传参

一：通过Link标签传参

1. 路由定义 (:后面标识传参占位)

} />


const { id } = useparams();

2. 查询字符串 (Query Parameters) (?后面拼接参数 => ?参数名=值, 可使用&进行连接多个参数)

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

const MyComponent = () => {
  const location = useLocation()
  const params = new URLSearchParams(location.search)
  const id = params.get('id')
}

3. 路由状态 (Route State)

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

const ListComponent = () => {
  const location = useLocation()
  const {id} = location.state
}

二：通过js方法进行传参

1. 使用history.push传参

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

const HomeComponent = () => {
  const history = useHistory()

  const routeChange = () => {
    const data = {id: 1, name: '小明'}
    history.push('/list', data) // 将data当作参数进行传递
  }

  return (
    跳转
  )
}


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

const ListComponent = () => {
  const location = useLocation()
  const { state } = location

  console.log(state) // => {id: 1, name: '小明'}
}

2. 使用useNavigate Hook

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

const HomeComponent = () => {
  const navigate = useNavigate()

  const routeChange = () => {
    const data = {id: 1, name: '小李'}
    navigate('/list', {state: data}) // 需要使用花括号包裹，且必须使用state当作外层key
  }
  return (
    跳转
  )
}


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

const ListComponent = () => {
  const location = useLocation()
  const { state } = location

  console.log(state) // => {id: 1, name: '小李'}
}

以上内容使用的react-router-dom是V6版本，注意辨别