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

Question

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

在这种情况下,我有三个文件.

App.js

Book.js

DetailedView.js

我在书内建立了一个<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>

Answer 1

为了在您的组件中接收路径参数,您需要首先将组件与withRouterHOC 连接,react-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 - (object)从对应于路径动态段的URL解析的键/值对
• isExact - (boolean)如果匹配整个URL,则为true(无尾随字符)
• path - (字符串)用于匹配的路径模式.用于构建嵌套的s
• url - (字符串)URL的匹配部分.用于构建嵌套的s

您将在不同的地方访问匹配对象:

1. 将组件路由为 this.props.match
2. 路线渲染为({match})=>()
3. 将子路由为({match})=>()
4. withRouter as this.props.match
5. matchPath作为返回值

如果Route没有路径,因此始终匹配,您将获得最接近的父匹配.同样适用于路由器