跳至主要內容

React - Route 路由 與 參數

約 7 分鐘
#React

React - Route 路由 與 參數

從 0 開始學 React

前言

學會 Route 後，路由也可以帶有參數！並藉由參數傳遞資料～而有三種參數傳遞的方法，下面我們一一介紹！

傳遞 params 參數

  1. 首先為路由組件，傳遞 params 參數

    // 先初始化 state
state = {
  msgArr : [
    {id:'01', title:'消息1'},
    {id:'02', title:'消息2'},
    {id:'03', title:'消息3'},
  ]
}
render(){
  const {msgArr} = this.state
  return(
    <div>
      <ul>
        {
          msgArr.map((msgObj)=>{
            return (
              <li key={msgObj.id}>
                {/* 向路由組件傳遞 params 參數，需注意反斜線是 JS 表達是要用{}包起來，多個參數用 / 分隔 */}
                <Link to={`/home/about/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>}
              </li>
            )
          })
        }
      </ul>
      {/* 接收 params 參數要用 : 來接收，參數名稱( key )取決於 : 後面的值 */}
      <Route path="/home/about/:id/:title" component={Message}/>
    </div>
  )
}

  2. 負責接收 params 參數的路由組件，利用console.log來看傳遞的參數

    render(){
  console.log(this.props)
  return(
    ...
  )
}

    可以看到 match 裡面的 params 有攜帶物件參數

  3. 此時 url 後面會攜帶參數，如：.../home/about/01/消息1

  4. 如果要使用 params 參數，就可以利用this.props.match.params來獲取參數

params 參數總結

  • 路由連結，需攜帶參數，多個參數用/分隔
  • 註冊路由，需接收參數，使用:來接收參數
  • 利用this.props.match.params來獲取參數

傳遞 search 參數

  1. 首先為路由組件，傳遞 search 參數

    // 先初始化 state
state = {
  msgArr : [
    {id:'01', title:'消息1'},
    {id:'02', title:'消息2'},
    {id:'03', title:'消息3'},
  ]
}
render(){
  const {msgArr} = this.state
  return(
    <div>
      <ul>
        {
          msgArr.map((msgObj)=>{
            return (
              <li key={msgObj.id}>
                {/* 向路由組件傳遞 search 參數，在 ? 後面寫 key=value，多個參數用 & 連接 */}
                <Link to={`/home/about/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>}
              </li>
            )
          })
        }
      </ul>
      {/* search 參數不需聲明接收 */}
      <Route path="/home/about/" component={Message}/>
    </div>
  )
}

  2. 負責接收 search 參數的路由組件，利用console.log來看傳遞的參數

    render(){
  console.log(this.props)
  return(
    ...
  )
}

    可以看到 location 裡面的 search 有攜帶 urlencoded 編碼

  3. 在接收 search 參數的組件內使用 React 內建的 JS 庫 - QueryString

    import qs from 'node:querystring'
 
export default class Message extends Component {
  render() {
    console.log(this.props)
    const { search } = this.props.location
    { /* 需把第一個問號給刪掉，可以使用 slide 來去除第一個問號 */ }
    const result = qs.parse(search.slide(1))
    console.log(result)
  }
}

    藉由 querystring 庫裡的 parse 方法，把 urlencoded 轉成物件型態

  4. 此時 url 後面會攜帶參數，如：.../home/about/?id=01&title=消息1

  5. 接著就可以利用result的參數，來繼續後面的操作

search 參數總結

  • 路由連結，需攜帶參數，在?後面寫key=value，多個參數用&連接
  • 正常註冊路由
  • 利用this.props.location.search來獲取unlencoded
  • 注意 獲取到的unlencoded需透過 QueryString 進行解析

傳遞 state 參數

注意：此 state 參數，與組件裡的 state 沒有關係

  1. 首先為路由組件，傳遞 state 參數

    // 先初始化 state
state = {
  msgArr : [
    {id:'01', title:'消息1'},
    {id:'02', title:'消息2'},
    {id:'03', title:'消息3'},
  ]
}
render(){
  const {msgArr} = this.state
  return(
    <div>
      <ul>
        {
          msgArr.map((msgObj)=>{
            return (
              <li key={msgObj.id}>
                {/* 向路由組件傳遞 state 參數，在 JS 表達式內傳遞物件，物件內要有 pathname, state */}
                <Link to={{
                  pathname:'/home/about/message',
                  state: {
                    id: msgObj.id,
                    title: msgObj.title
                  }
                }}>{msgObj.title}</Link>}
              </li>
            )
          })
        }
      </ul>
      {/* state 參數不需聲明接收 */}
      <Route path="/home/about/" component={Message}/>
    </div>
  )
}

  2. 負責接收 state 參數的路由組件，利用console.log來看傳遞的參數

    render(){
  console.log(this.props)
  return(
    ...
  )
}

    可以看到 location 裡面的 state 有攜帶物件參數

  3. 此時 url 後面並不會攜帶參數，如：.../home/about

    注意

    • 因為沒攜帶參數，所以是藉由history內的location來獲取參數
    • 如果history清除紀錄，location裡的state會變成undefined
    • 所以要使用判斷表達式，如果是undefined就傳遞空物件，來避免無法預期的出錯

  4. 如果要使用 state 參數，就可以利用this.props.location.state來獲取參數

state 參數總結

  • 路由連結，需攜帶參數，在to裡面新增物件{{}}，最外層的{}是 JS 表達式，物件內需有 path 字串 與 state 物件
  • 正常註冊路由
  • 利用this.props.location.state來獲取物件參數
  • 備註 畫面刷新也可以保留參數

路由參數總結

  • params 參數，最常用

    • 路由連結，需攜帶參數，多個參數用/分隔
    • 註冊路由，需接收參數，使用:來接收參數
    • 利用this.props.match.params來獲取參數

  • search 參數，也是有使用，但比較麻煩

    • 路由連結，需攜帶參數，在?後面寫key=value，多個參數用&連接
    • 正常註冊路由
    • 利用this.props.location.search來獲取unlencoded
    • 注意 獲取到的unlencoded需透過 QueryString 進行解析

  • state 參數，在比較需要隱私的地方會使用

    • 路由連結，需攜帶參數，在to裡面新增物件{{}}，最外層的{}是 JS 表達式，物件內需有 path 字串 與 state 物件
    • 正常註冊路由
    • 利用this.props.location.state來獲取物件參數
    • 備註 畫面刷新也可以保留參數

參考資料

相關文章

分享此文章
Johnson Mao

Johnson Mao

熱衷於分享技術、AI 與開發心得的軟體工程師。

GitHub

留言