向路由组件传递 search 参数

上节课我们介绍了如何向路由组件传递params参数，其实向路由组件传递参数总共有三中方法，其中params参数是最简单的一种方法，这节课呢我们来介绍另一种方法，向路由组件传递search参数。

回顾

在介绍然如何传递search参数之前，我们来对上节课内容来做一个简单的回顾

params参数可以直接写咋路由链接路径中
注册路由时要声明接收参数
param参数存放在props中的match.params中。

以上便是上节课的params参数传递的主要内容，接下来我们开始这节课的内容的学习

`search`参数的传递

其实search参数我们不算陌生，只要有search那必定有query，search 参数和query参数一模一样，用?作为参数开始，然后以&来连接多个键值对。但是既然都一样，为什么不叫query参数还要单独去个名字叫search参数呢？等一会儿就知道了。既然我们params参数要在注册路由的时候来接收，那么search参数也一样，我们是不是也要有相应的传参 -- 声明 -- 取出。

export default class Message extends Component {
  state = {...}
  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {messageArr.map(
            msg => <li key={msg.id}>
              <Link to={`/home/message/details/?id={msg.id}&title={msg.title}`}>
                {msg.title}
              </Link>
            </li>
          )}
        </ul>
        <Route path="/home/message/details" component={Details} />
      </div>
    )
  }
}

我们来看一下代码，我们在设置路由链接的时候我们就是和query参数一模一样，但是在注册路由的时候好像什么都没干啊，因为search参数不需要声明接收。直接和正常情况下一样注册路由就可以了。那么我们知道怎么传了，而且也不用声明接收，那么在details组件中我们应该怎么取出来用呢？那么我们来看一下props呗，看看参数放在哪了。

我们还是按照惯例去match里面先瞧一眼，我管他有没有呢，我既然不知道存哪了，那就去看一下，但是match里面没有，因为match里面是接params参数的，怎么可能会有search参数呢。换个地方，在location中找到了我的参数，在search里。但是这个东西我们怎么用啊？我们params是被自动整理好的，但是现在怎么办呢？我们就要用到一个库叫querystring。

我来问大家一下，向key1=value1&key2=value2&key3=value3这种是什么？是不是将对象用urlencoded编码形式编码的字符串？那么querystring就可以来解析这种字符串并返回一个对象

import qs from 'querystring';

const data = [...]

export default class Details extends Component {
  render() {
    const { id, title } = qs.parse(this.props.location.search.slice(1));
    const findResult = data.find(d=>d.id.toString() === id);
    return (
      <ul>
        <li>ID: {id}</li>
        <li>TITLE: {title}</li>
        <li>CONTENT: {findResult.content}</li>
      </ul>
    )
  }
}

首先我们导入querystring库，然后调用parse方法来解析search字符串，但是这个字符串中是不是前面有一个?啊？那么我们辣截取一下，把?给去掉，然后解析成对象之后我们就可以结构赋值了。后面的就是通过id查找content，和之前的没有区别就不赘述了。那么我们看一下效果：

参数确实是和query参数没有什么区别，内容也正常展示了。但是因为参数最终去了search属性上了，所以说这个参数不叫query参数。

总结

search参数不需要声明接收
search参数存放在props中location.search属性中
search参数传参方法和query参数一模一样

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/pass_search_params_to_router/

向路由组件传递 search 参数

回顾

search参数的传递

总结

`search`参数的传递