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

因此，目前，我有一个路由组件：

<Route path="/lists/:query" component={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);

componentDidMount（）{
const query=match.params.query；
const cleanQueryString=query.replace（/[|；$%@“（）+，]/g，”）；
//使用“&”和“=”将字符串拆分为一个对象
const properties=this.queryURL（cleanQueryString）；
const cleanQueryObj=u2;.pick（Object.assign（{}，…properties）[
“第页”，
“城市代码”，
“最低月费”，
“每月最高费用”，
“订购人”，
]);
//根据组件状态更新查询对象
this.setState（{query:cleanQueryObj}，（）=>{
cleanQueryObj.page&&this.updateIndex（parseInt（cleanQueryObj.page，10））；
});
//调用axios请求并更新redux
调度（手持列表（cleanQueryObj））；
//更新浏览器url
这个.props.history.push（cleanQueryObj）；

现在，我看到很多主要网站在查询之前都在使用

？q=

，我想知道我遗漏了什么或者可以改进什么

---

想法？

虽然您所做的在技术上是有效的，但有点不标准。您使用路由器

的方式：查询
参数及其格式，实际上看起来像一个实际的
位置。搜索
参数格式，而不是路径参数

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

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
]);

//在路由中，只有一个没有路径参数的简单路由
//在您的组件中
从“查询字符串”导入查询字符串
[...]
componentDidMount（）{
//使用react路由器中的位置对象
const{search}=this.props.location
//使用npm专用模块解析它
const{page，city_codes}=queryString.parse（搜索）
//现在你可以使用这些参数了
]);

编辑：现在是问题的实际答案：

？q=blah
通常用于搜索上下文，其中
q
参数是用于搜索某物的字符串。后面可能有其他参数，例如
？q=blah&ext=txt

因此，它不同于您的
：query
路径参数，该参数被编码为包含多个参数，而
q
这里是一个随时可用的参数

// 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
]);