代码之家 › 专栏 › 技术社区 › S.V.

处理组件中通过react路由器传递的参数

react-router-dom react-router-v4 react-router reactjs javascript

S.V. · 技术社区 · 7 年前

因此,在react router v4中,我的路由如下所示:

      <Route path="/suppliers/:id?" component={Suppliers} />

对于子孙后代,这是我的链接: <Link to="/suppliers/123">Place Order</Link>

<p>{this.props.match.params.id}</p>

[eslint] 'match' is missing in props validation (react/prop-types)

因此,我将proptype定义为:

Suppliers.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.number,
    }).isRequired,
  }).isRequired,
};

但感觉我写的样板代码比我可能需要的要多。我的问题是,有没有更好的方法在组件中定义我的proptype,以避免linter错误?此外,如果使用道具,这种解决方案似乎是不可持续的。匹配它将中断的属性更改。还是我做得对?

提前谢谢。

2 回复 | 直到 7 年前

Hana Alaydrus 7 年前

您的代码可以,但也可以将proptype定义为object。

match: PropTypes.object.isRequired

match, location, history . 你可以这样定义它。

Suppliers.propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

kevinmartinez 4 年前

为了涵盖这些关于匹配(和历史)的案例,以取悦linters,您可以这样声明您的道具类型:

     Suppliers.propTypes = {
      match: PropTypes.shape().isRequired,
      }).isRequired,
    };

这是在我们的项目中最适合我们的解决方案。

推荐文章

Evanss · 使用React Router 4对组件内的url更改作出反应?

6 年前

Aman_Kawatra · 渲染同一组件,并在特定管线更改上更改某些状态属性

6 年前

James · 受保护的路由反应路由器4不使用存储在Redux中的身份验证状态

6 年前

Max Wolfen · 为什么在新的react路由器dom<Redirect/>中没有在setTimout内触发?

6 年前

Nicolas Albarracin · Web包和React浏览器路由器

6 年前

Prasaad Patil · 如何显示传递给组件的参数,以及如何在reactjs中为组件提供可选参数?

6 年前

RomaValcer · 隐式传递路由器历史记录

6 年前

forJ · 如何使用react路由器4配置专用路由

6 年前

Mesmerize86 · 嵌套React路由器v4

6 年前

Velidan · React Router v4-使用更改的默认路由进行动态配置

6 年前