javascript - 如何使用反应路由器 dom v5.0.1 获取参数

Question

如何在获取参数之前使用 react router dom v5.0.1 获取参数，但现在我无法获取它们，这是什么问题？

<BrowserRouter>
      <Route path='/' exact component={Login} />
      <Route path='/register' component={Register} />
      <Route path='/home' component={Home} />
      <Route path='/all/merchant' component={AllMerchant} />
      <Route path='/detail/merchant/:id_merchant' exact component={DetailMerchant} />
      <Route path='/detail/merchant/promo/:id_merchant' component={MerchantByPromo} />
      <Route path='/promo/voucher/by/merchant/' component={MerchantByPromoDetail} />
      <Route path='/all/category' component={Category} />
      <Route path='/category/id/:category_id' component={CategoryById} render = {props => <CategoryById {...props} key={this.props.match.params} /> }/>
      <Route path='/promo/grid/view' component={PromoGridView} />
      {/* params not found */}
      <Route path='/promo/grid/view/by/category/:category_id' component={AllPromoGridView} />
      <Route path='/detail/promo/:voucher_id/category_id/:category_id' component={PromoGridViewDetail} />
      {/* params not found */}
      <Route path='/account' component={Account} />
    </BrowserRouter>

标签： javascriptreactjsreact-router-dom

Answer 1

根据 react-router doc，您应该可以Component通过 props访问它match：

例子：

// the route
<Route path="/:id" component={Child} />

/*
...
*/ 

//the component
function Child({ match }) {
  return (
    <div>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
}