Question

我正在使用react-router v4。我们可以在v4中将查询参数传递为/ user /：id?。但是，我需要在/ user /？id =“ id”之类的路由中传递查询参数。

任何帮助或建议都是可以的。

Answer 1

您可以在位置对象上使用search属性，该属性对路由器传递给所有组件做出反应

例如如果您的路线是/user?id=1，那么

console.log(this.props.location.search) // ?id=1

然后您可以使用query-string之类的库来解析那些查询参数

import queryString from 'query-string'

// inside your component
const params = queryString.parse(this.props.location.search)
params.id === 1

Answer 2

您可以按照以下说明使用上下文，

import PropTypes from 'prop-types'
class Sample extends React.Component {
  static get contextTypes() {
    return {
      router: PropTypes.object.isRequired,
    };
  }
.....
 handleSubmit(data) {
    let query = {}
    query['id'] = data.id
    this.context.router.push({
      pathname:'/path',
      query: query
    });
  }
  }
}

Answer 3

您可以使用HOC来提取并解析React Router提供的search对象的location属性到底层组件。像这样：

const withQuery = Component => props => {
  if (props.location && props.location.search) {
    const query = props.location.search.substr(1)
      .split('&')
      .reduce((carry, pair) => {
        const [ key, val ] = pair.split('=');
        carry[unescape(key)] = unescape(val);
        return carry;
      }, {});
    return <Component {...props} query={query} />
  } else {
    return <Component {...props} query={{}} />
  }
}

并包装根据<Route />呈现的组件：

<Route
  path="/query"
  component={withQuery(MyComponent)}
/>

看看this sandbox可以详细了解这个想法。

有没有机会在路由中传递诸如？id =“ idValue”之类的查询参数？

3 个答案: