react路由组件传参

最新推荐文章于 2024-04-26 00:15:37 发布

겐호 3

最新推荐文章于 2024-04-26 00:15:37 发布

阅读量355

点赞数

分类专栏：前端 react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/long321041080/article/details/132143254

版权

前端同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

一：通过Link标签传参

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

<Route path="/list/:id" element={<List/>} />

<!-- 接收数据 使用useParams -->
const { id } = useparams();

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

<Link to="/list?id=1" />

<!-- 接收数据 -->
import { useLocation } from 'react-router-dom'

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

路由状态 (Route State)

<Link to="{{pathname: '/list', state: {id: 1}}}" />

<!-- 接收数据 -->
import {useLocation} from 'react-router-dom'

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

二：通过js方法进行传参

使用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 (
    <button onClick={routeChange}>跳转</button>
  )
}

<!-- 接收参数组件 -->
import {useLocation} from 'react-router-dom'

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

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

使用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 (
    <button onClick={routeChange}>跳转</button>
  )
}

<!-- 接收参数组件 -->
import {useLocation} from 'react-router-dom'

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

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

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