Question

所以，目前，我有一个路由组件：

<Route path="/lists/:query" component={Lists} />

我接到一个电话：

http://localhost:4567/lists/page=17&city_codes=2567

在我的Lists组件中，我以这种方式处理此查询：

componentDidMount() {
  const query = match.params.query;
  const cleanQueryString = query.replace(/[|;$%@"<>()+,]/g, '');
  // break up the string using '&' and '=' into an object
  const properties = this.queryURL(cleanQueryString);
  const cleanQueryObj = _.pick(Object.assign({}, ...properties), [
  'page',
  'city_codes',
  'min_monthly_fee',
  'max_monthly_fee',
  'order_by',
]);

  // update the query object based on component state
  this.setState({ query: cleanQueryObj }, () => {
    cleanQueryObj.page && this.updateIndex(parseInt(cleanQueryObj.page, 10));
  });
  // call axios request and update redux
  dispatch(handleLists(cleanQueryObj));
  // update browser url
  this.props.history.push(cleanQueryObj);

现在，我在查询之前看到许多使用?q=的主要网站，我想知道我缺少什么或可以改进什么？

思想？

Answer 1

虽然你在做什么在技术上是有效的，但它有点不标准。使用路由器:query param的方式及其格式化方式，reaaaaly看起来像一个实际的location.search参数格式，而不是路径参数。

更标准的方法是使用以下网址：

http://localhost:4567/lists?page=17&city_codes=2567

代码如下：

// In your routes, just a simple route with no path params
<Route path="/lists" component={Lists} />

// In your component
import queryString from 'query-string'

[...]

componentDidMount() {
  // Use location object from react-router
  const { search } = this.props.location 
  // Parse it using a npm dedicated module
  const { page, city_codes } = queryString.parse(search)
  // Now you can use those params
]);

编辑：现在回答问题：

?q=blah通常用于搜索上下文，q参数是用于搜索内容的字符串。可以有以下其他参数，例如?q=blah&ext=txt。

因此，它与您的:query路径参数不同，后者被编码为包含多个参数，而q这里是一个即用型参数。

React Router：通过React路由器处理查询

1 个答案: