React - Route 路由 與 參數

React - Route 路由 與 參數

從 0 開始學 React

前言

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

傳遞 params 參數

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // 先初始化 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來看傳遞的參數

    1
    2
    3
    4
    5
    6
    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 參數

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // 先初始化 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來看傳遞的參數

    1
    2
    3
    4
    5
    6
    render(){
      console.log(this.props)
      return(
        ...
      )
    }

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import qs from '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 參數

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // 先初始化 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來看傳遞的參數

    1
    2
    3
    4
    5
    6
    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來獲取物件參數
    • 備註 畫面刷新也可以保留參數

參考資料