如何使用React Router 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>

- Muhamad Rahmat Setiawan

---

请问您能否澄清一下您的问题？目前不太清楚您想要问什么。 - Shubham Khatri

Answer 1

根据react-router 文档，你应该可以通过match属性在Component中访问它：

示例：

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

/*
...
*/ 

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

- Gaël S