reactjs - 如何使用反应路由器版本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

您可以使用props.match.params.id和props.match.params.type访问参数。

参考这个例子 - https://jaketrent.com/post/access-route-params-react-router-v4/

Answer 2

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

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

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

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