从 React-Router3 获取搜索值

当我们使用 React-Router3 来构建我们的应用时，有时候会需要从 URL 中获取参数，比如一个搜索字符串。这个搜索字符串可能是用户在搜索框中输入的内容，我们需要将其从 URL 中取出来以便进行搜索操作。

处理 URL 中的参数可以通过 this.props.params 来实现，但对于搜索框中的输入来说，这种方式并不合适。因为每当用户输入内容时，这个参数都会变化。

React-Router3 提供了两个 API 来解决这个问题： router.createPath(pathname, query) 和 router.createHref(pathname, query)。这两个函数不仅可以根据当前的 props 和 state，构造输出路径和 href，还可以将搜索关键字作为查询参数传递给 URL。

如下是一个例子：

import React from 'react';
import { withRouter } from 'react-router';

class SearchBar extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();

    const query = this.queryInput.value;
    this.props.router.push({
      pathname: '/search',
      query: { q: query }
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="search" ref={(input) => this.queryInput = input} />
        <button type="submit">搜索</button>
      </form>
    );
  }
}

export default withRouter(SearchBar);

我们可以在 SearchBar 组件中定义一个 handleSubmit 方法，该方法会取得输入框的值，将其作为查询参数传递给 push 方法，并将路径设置为 /search。

在接收到搜索关键字时，我们可以使用 this.props.location.query.q 来获取它。

这样，我们就可以像下面这样来实现搜索功能了：

import React from 'react';
import { withRouter } from 'react-router';
import SearchBar from './SearchBar';

class SearchPage extends React.Component {
  handleSearch = () => {
    const keyword = this.props.location.query.q;
    // 使用从 URL 中取得的关键字进行搜索操作
  }

  render() {
    return (
      <div>
        <SearchBar />
        <button onClick={this.handleSearch}>搜索</button>
      </div>
    );
  }
}

export default withRouter(SearchPage);

以上就是从 React-Router3 获取搜索值的方法，希望对你有所帮助！