React Router 3，与查询参数完全匹配 [英] React Router 3, exactly match against query param

问题描述

在 React Router 3 中，如何精确匹配包含查询参数的路由?

像这样，

解决方案

从这个意义上说，查询参数不是路由的一部分.您需要在组件中检查它们，例如:

class 关于 extends React.Component {使成为() {返回(<div>{this.props.location.query.qs1 ?正确的路线！": '无效路线！'}

);}}

您还可以检查 componentDidMount 中的查询参数并将您的用户重定向到不同的路由(例如 404).在官方文档中阅读有关路由匹配的更多信息.

In React Router 3, how do you match exactly against a route containing query params?

Something like this,

<Route path="about?qs1=:qs&qs2=:qs2" component={About} />

解决方案

Query params are not part of a route in that sense. You will need to check for them inside your component, for example like this:

class About extends React.Component {
  render() {
    return(
      <div>
        {this.props.location.query.qs1 ? 'Correct route!' : 'Invalid route!'}
      </div>
    );
  }
}

You could also check for the query params inside componentDidMount and redirect your users to a different route (e.g. 404). Read more about Route Matching in the official docs.

这篇关于React Router 3，与查询参数完全匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！