javascript - 使用React Router从url获取参数值

Question

我想从这个 React Router 获取 id 值:

<BrowserRouter basename="/api">
    <Switch>
        <Route path="/pm" exact component={PaymentMethod}/>
        <Route path="/pw" exact component={PaymentWeb}/>
        <Route path="/rg" exact component={Registrasi}/>
        <Route path="/bonus/:id" exact component={BonusScreen}/>
        <Route path="/hb" exact component={HistoryBonus}/>
    </Switch>
</BrowserRouter>

在我的 BonusScreen 中，我尝试使用以下方法打印该值:

const userId = this.props.match.id;
console.log(this.userId);

我尝试从浏览器访问如下 URL:

bonus/NGO628567652201

但它总是返回未定义。
我该如何解决这个问题？

Answer 1

如果有人遇到这个问题。正确的是:

const userId = this.props.match.params.id;

05/2020 使用 React Router V4 和 Hook 进行更新

import { useParams } from 'react-router-dom';

//Then inside your component
const { id } = useParams();