如何使用 React 路由器版本4 在 ReactJS 中的 URL 中传递参数

Question

在 react-router 版本 4 中，如何在 url 中传递参数，在旧版本中我使用的是 this.props.params。 但它在这个版本中被弃用了，所以请帮助我。我以这种方式发送参数

<Link to={"/dashboard/viewProfile/"+id+"/"+type}>View Profile</Link>

和路由

<Route path="/dashboard/viewProfile/:id/:type" render={() => <ViewProfile />} />

所以现在在查看配置文件组件中如何获取这些参数。

Answer 1

你必须定义你的路由器元素：

 <Router>
      <div>
        <Route path="/topics/:name" component={Topic} />
      </div>
    </Router>

在路径中使用参数，您可以从主题组件中获取参数，例如：

export default function Topic(props) {
  return <h1>{props.match.params.name}</h1>
}

Answer 2

您可以使用

props.match.params.id和props.match.params.type来访问参数。

参考此示例 - https://jaketrent.com/post/access-route-params-react-router-v4/