React路由組件傳參的三種方式(params、search、state)

更新時(shí)間：2022年07月21日 14:16:54 作者：蠟筆雛田學(xué)代碼

本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

??向路由組件傳遞params參數(shù)

當(dāng)點(diǎn)擊消息1這個(gè)導(dǎo)航鏈接時(shí)，展示下方對(duì)應(yīng)的Detail路由組件，并向這個(gè)組件傳遞params參數(shù)（ID，TITLE，CONTENT）信息。

在這里插入圖片描述

向路由組件傳遞params參數(shù)：在路徑后面跟上想要傳遞的值

{
  messageArr.map((msgObj) => {
    return (
      <li key={msgObj.id}>
			 <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
			 {msgObj.title}</Link>
      </li>
    )
 })
}

注冊(cè)路由時(shí)，聲明接收params參數(shù)

<Route path="/home/message/detail/:id/:title" component={Detail} />

這樣id，title參數(shù)就傳遞給了Detail組件，Detail組件可以通過(guò)this.props.match.params拿到參數(shù)。

// 接收params參數(shù)
const { id, title } = this.props.match.params

在這里插入圖片描述

Message->index.jsx：

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail';

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' }
    ]
  }
  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) => {
              return (
                <li key={msgObj.id}>
                  {/* 向路由組件傳遞params參數(shù) */}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
                  {msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 注冊(cè)路由 */}
        {/* 聲明接收params參數(shù) */}
        <Route path="/home/message/detail/:id/:title" component={Detail} />
      </div>
    )
  }
}

Detail->index.jsx:

import React, { Component } from 'react'

const DetailData = [
  { id: '01', content: '你好，中國(guó)' },
  { id: '02', content: '你好，程序員' },
  { id: '03', content: '你好，csdn' }
]
export default class Detail extends Component {
  render() {
    // 接收params參數(shù)
    const { id, title } = this.props.match.params
    const findResult = DetailData.find((detailObj) => {
      // 如果某一項(xiàng)對(duì)象的id和我傳過(guò)來(lái)的Id相等，findResult就等于這一項(xiàng)對(duì)象
      return detailObj.id === id
    })
    return (
      <ul>
        <li>ID: {id}</li>
        <li>TITLE: {title}</li>
        <li>CONTENT: {findResult.content}</li>
      </ul>
    )
  }
}

??向路由組件傳遞search參數(shù)

當(dāng)點(diǎn)擊消息1這個(gè)導(dǎo)航鏈接時(shí)，展示下方對(duì)應(yīng)的Detail路由組件，并向這個(gè)組件傳遞search參數(shù)（ID，TITLE，CONTENT）信息。

在這里插入圖片描述

向路由組件傳遞search參數(shù)：和params的寫(xiě)法有所不同

{
  messageArr.map((msgObj) => {
    return (
      <li key={msgObj.id}>
				{/* 向路由組件傳遞search參數(shù) */}
				<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>
				{msgObj.title}</Link>
      </li>
   )
 })
}

注冊(cè)路由時(shí)，search參數(shù)無(wú)需聲明接收，正常注冊(cè)路由即可，因?yàn)閭鬟fsearch參數(shù)的路徑里有一個(gè)？關(guān)鍵符存在

<Route path="/home/message/detail" component={Detail} />

這樣id，title參數(shù)就傳遞給了Detail組件，Detail組件可以通過(guò)this.props.location.search拿到參數(shù)。

但是，接收到的參數(shù)是一個(gè) urlencoded 格式的（例如 name=tom&age=18 就是urlencoded格式）

在這里插入圖片描述

所以我們需要將 urlencoded格式轉(zhuǎn)換為一個(gè) 對(duì)象的形式，需要借助一個(gè)query-string庫(kù)。

// 安裝query-string庫(kù)
npm i --save --include=dev query-string
// 引入query-string
import qs from 'query-string'

query-string庫(kù)里有兩個(gè)方法stringfy()和parse()。

// 將object轉(zhuǎn)化為urlencoded
qs.stringify()

// 將urlencoded轉(zhuǎn)化為object
qs.parse()

// 接收search參數(shù)
const { search } = this.props.location
const { id, title } = qs.parse(search.slice(1))

在這里插入圖片描述

Message->index.jsx：

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail';

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' }
    ]
  }
  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) => {
              return (
                <li key={msgObj.id}>
                  {/* 向路由組件傳遞search參數(shù) */}
                  <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>
                  {msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 注冊(cè)路由 */}
        {/* search參數(shù)無(wú)需聲明接收，正常注冊(cè)路由即可 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    )
  }
}

Detail->index.jsx:

import React, { Component } from 'react'
// 引入query-string庫(kù)
import qs from 'query-string'

const DetailData = [
  { id: '01', content: '你好，中國(guó)' },
  { id: '02', content: '你好，程序員' },
  { id: '03', content: '你好，csdn' }
]
export default class Detail extends Component {
  render() {
    // 接收search參數(shù)
    const { search } = this.props.location
    const { id, title } = qs.parse(search.slice(1))

    const findResult = DetailData.find((detailObj) => {
      // 如果某一項(xiàng)對(duì)象的id和我傳過(guò)來(lái)的Id相等，findResult就等于這一項(xiàng)對(duì)象
      return detailObj.id === id
    })
    return (
      <ul>
        <li>ID: {id}</li>
        <li>TITLE: {title}</li>
        <li>CONTENT: {findResult.content}</li>
      </ul>
    )
  }
}

??向路由組件傳遞state參數(shù)

前面學(xué)的兩個(gè)參數(shù)給組件傳遞的信息會(huì)在地址欄中展示出來(lái)，例如：localhost:3000/home/message/detail/?id=01&title=消息1，這是傳遞search參數(shù)的地址。

但是，傳遞state參數(shù)不會(huì)在地址欄中顯示出來(lái)。

向路由組件傳遞state參數(shù)：

{
  messageArr.map((msgObj) => {
    return (
      <li key={msgObj.id}>
        {/* 向路由組件傳遞state參數(shù) */}
		<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>
		{msgObj.title}</Link>
</li>
)
})
}

注：這里的to屬性要寫(xiě)成一個(gè)對(duì)象的形式（傳遞params和search參數(shù)都是字符串形式），對(duì)象有兩個(gè)屬性分別是：pathname以及state，需要傳遞的參數(shù)就放在state中。

注冊(cè)路由時(shí)，search參數(shù)無(wú)需聲明接收，正常注冊(cè)路由即可。

<Route path="/home/message/detail" component={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->Detail} />

這樣id，title參數(shù)就傳遞給了Detail組件，Detail組件可以通過(guò)this.props.location.state拿到參數(shù)。

// 接收state參數(shù)
const { id, title } = this.props.location.state

在這里插入圖片描述

Message->index.jsx：

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail';

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' }
    ]
  }
  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) => {
              return (
                <li key={msgObj.id}>
                  {/* 向路由組件傳遞state參數(shù) */}
                  <Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>
                  {msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 注冊(cè)路由 */}
        {/* state參數(shù)無(wú)需聲明接收，正常注冊(cè)路由即可 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    )
  }
}

Detail->index.jsx:

import React, { Component } from 'react'

const DetailData = [
  { id: '01', content: '你好，中國(guó)' },
  { id: '02', content: '你好，程序員' },
  { id: '03', content: '你好，csdn' }
]
export default class Detail extends Component {
  render() {
    // 接收state參數(shù)
    const { id, title } = this.props.location.state

    const findResult = DetailData.find((detailObj) => {
      // 如果某一項(xiàng)對(duì)象的id和我傳過(guò)來(lái)的Id相等，findResult就等于這一項(xiàng)對(duì)象
      return detailObj.id === id
    })
    return (
      <ul>
        <li>ID: {id}</li>
        <li>TITLE: {title}</li>
        <li>CONTENT: {findResult.content}</li>
      </ul>
    )
  }
}

有一個(gè)問(wèn)題：當(dāng)刷新頁(yè)面，頁(yè)面內(nèi)容不會(huì)改變，原因是history下保存著state數(shù)據(jù)，當(dāng)清除瀏覽器緩存，重新打開(kāi)頁(yè)面，數(shù)據(jù)會(huì)丟失。改為如下代碼，頁(yè)面刷新不會(huì)報(bào)錯(cuò)。

// 接收state參數(shù)
const { id, title } = this.props.location.state || {}

const findResult = DetailData.find((detailObj) => {
  // 如果某一項(xiàng)對(duì)象的id和我傳過(guò)來(lái)的Id相等，findResult就等于這一項(xiàng)對(duì)象
  return detailObj.id === id
}) || {}

??總結(jié)三種向路由組件傳參的方式

params參數(shù)：

路由鏈接（攜帶參數(shù)）：<Link to=“/demo/test/tom/18”>詳情

注冊(cè)路由（聲明接收）：<Route path=“/demo/test/:name/:age” component={Test}/>

接收參數(shù)： this.props.match.params

search參數(shù)：

路由鏈接（攜帶參數(shù)）：<Link to=“/demo/test?name=tom&age=18”>詳情

注冊(cè)路由（無(wú)需聲明，正常注冊(cè)即可）：<Route path=“/demo/test” component={Test}/>

接收參數(shù)： this.props.location.search

備注：獲取到的search是urlencoded編碼字符串，需要借助querystring解析。

state參數(shù)：

路由鏈接（攜帶參數(shù)）：<Link to={{pathname:‘/demo/test’,state: {name: ‘tom’,age:18}}}>詳情

注冊(cè)路由（無(wú)需聲明，正常注冊(cè)即可）：<Route path=“/demo/test” component={Test}/>

接收參數(shù)： this.props.location.state

備注：如果不用BrowserRouter,刷新保留不住參數(shù)，因?yàn)锽rowserRouter的history里保留了參數(shù)信息。

到此這篇關(guān)于React路由組件傳參的三種方式(params、search、state)的文章就介紹到這了,更多相關(guān)React路由組件傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: