1. 首页
  2. 问题
  3. 在react-router v4中获取路径参数
小编典典

在react-router v4中获取路径参数

reactjs

我正在尝试通过我的应用程序建立路由器链接，

在这种情况下，我有三个文件。

App.js

Book.js

DetailedView.js

我在Book的内部建立了一个<Link>仅在悬停时才会出现（在书的封面上）

{this.state.isHovered ? (
   <Link to={`/details/${this.props.book.industryIdentifiers[1].identifier}`}>
<div className="hover-box"></div>
</Link>) : ( <div /> )}

这将带我到/ details / 12345（isbn10号）

我很难理解的是例如setState({iPressedThisBook})在按下时如何
操作，<Link>或者是否可以在以后使用零件/12345创建像过滤器一样的方法

由于App在Route将安装成…

<Route path="/details/:id" render={() => (
          <BookDetailedView
            bookStateUpdated = {this.bookStateUpdated}
            book = {this.state.books}
          />
)}/>

后来，我想抓住它，:id这样我就可以this.props.book.find(:id)将自己的内部<BookDetailedView>


阅读 347

收藏
2020-07-22

共1个答案

小编典典

为了在您的组件中接收路径参数，您需要首先将您的组件与withRouterHOC 连接，react- router以便您可以访问Router道具并params从match道具中获取路径。this.props.match.params.id

样例代码：

import {withRouter} from 'react-router';

class BookDetailedView extends React.Component {
    render() {
        var id = this.props.match.params.id


    }
}
export default withRouter(BookDetailedView) ;

或简单地将其与渲染道具一起传递给路线

<Route path="/details/:id" render={({match}) => (
          <BookDetailedView
            bookStateUpdated = {this.bookStateUpdated}
            book = {this.state.books}
            id={match.params.id}
          />
)}/>

从的React文档 match

比赛

匹配对象包含有关<Route path>URL 如何匹配的信息。match对象包含以下属性：

  • params-（对象）从URL解析的键/值对，对应于路径的动态段
  • isExact-（布尔值）如果整个URL都匹配，则为true（无尾字符）
  • path-（字符串）用于匹配的路径模式。用于构建嵌套的s
  • url-（字符串）URL的匹配部分。用于构建嵌套的s

您将在各个地方访问匹配对象：

  1. 将组件路由为 this.props.match
  2. 将渲染路线设置为（{match}）=>（）
  3. 将子级路由为（{match}）=>（）
  4. withRouter为this.props.match
  5. matchPath作为返回值

如果路线没有路径，因此始终匹配，则将获得最接近的父项匹配项。同样适用于路由器

2020-07-22