向路由传递参数

params参数 方法

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

export default class index 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}>
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;
                </li>
              )
            })
          }
        </ul>
        <hr />
        <Route path="/home/message/detail/:id/:title" component={Detail}/>
      </div>
    )
  }
}

通过 /${msgObj.id}/${msgObj.title} 传递参数
通过 /:id/:title 接收参数

import React, { Component } from 'react'

const DetailData = [
  {id:"01",content:"你好，中国"},
  {id:"02",content:"你好，小宝"},
  {id:"03",content:"你好，未来的自己"}
]
export default class Detail extends Component {
  render() {
    const { id, title } = this.props.match.params
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id ===id
    })
    return (
      <ul>
        <li>ID：{id}</li>
        <li>TITLE:{title}</li>
        <li>CONTENT:{findResult.content}</li>
      </ul>
    )
  }
}

const findResult = DetailData.find((detailObj) => {
return detailObj.id ===id
})
根据id来进行判断 返回 detailObj中满足条件的对象

seach参数 方法

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

export default class index 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参数 */}
                  <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* search参数 无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    )
  }
}

import React, { Component } from 'react'
import qs from 'querystring'

const DetailData = [
  {id:"01",content:"你好，中国"},
  {id:"02",content:"你好，小宝"},
  {id:"03",content:"你好，未来的自己"}
]
export default class Detail extends Component {
  render() {
    // 接收params参数
    // const { id, title } = this.props.match.params
    // 接收search参数
    const { search } = this.props.location
    const { id,title }  = qs.parse(search.slice(1))
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id
    })
    return (
      <ul>
        <li>ID：{id}</li>
        <li>TITLE:{title}</li>
        <li>CONTENT:{findResult.content}</li>
      </ul>
    )
  }
}

需要用qs 来将 ?id=01&title="消息1"转换成对象的形式{id:01,title=“消息1”} 此时需要用到slice(1)来将？截取掉
search参数 无需声明接收，正常注册路由即可

state参数 方法

import React, { Component } from 'react'
// import qs from 'querystring'

const DetailData = [
  {id:"01",content:"你好，中国"},
  {id:"02",content:"你好，小宝"},
  {id:"03",content:"你好，未来的自己"}
]
export default class Detail extends Component {
  render() {
    // 接收params参数
    // const { id, title } = this.props.match.params
    // 接收search参数
    // const { search } = this.props.location
    // const { id,title }  = qs.parse(search.slice(1))
    // 接收state参数
    const { id, title } = this.props.location.state || {}
    
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id
    })|| {}
    return (
      <ul>
        <li>ID：{id}</li>
        <li>TITLE:{title}</li>
        <li>CONTENT:{findResult.content}</li>
      </ul>
    )
  }
}

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

export default class index 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参数  */}
                  {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

                  {/* 向路由传递search参数 */}
                  {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由传递state参数 */}
                  <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title }</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}
        {/* search参数 无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail} /> */}
        {/* state参数 无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    )
  }
}

<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title }</Link> to 赋值需要用对象形式
const { id, title } = this.props.location.state 接收参数时需要在 this.props.location.state中查找

总结

1.params参数
	路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
	注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
	接收参数：this.props.match.params
2.search参数
	路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
	注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
	接收参数：this.props.location.search
	备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
	路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
	注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
	接收参数：this.props.location.state
	备注：刷新也可以保留住参数