Javascript 获取react路由器v4中的路径参数

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

在这个场景中，我有三个文件

App.js

Book.js

DetailedView.js

我在书的内部建立了一个

，只有当鼠标悬停（在书皮上）时才会出现

---

一、 稍后，要获取

:id

，以便在我的

中创建一个

this.props.book.find（：id）

，以便在组件中接收路径参数，您需要首先将您的组件与

withRouter

HOC from

react router

连接，这样您就可以访问路由器道具，并从

match

道具中获取路径

params

作为

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文档

匹配

匹配对象包含有关如何匹配

的信息 URL<代码>匹配对象包含以下属性：

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

您可以在不同的位置访问匹配对象：

将组件路由为

this.props.match

路由渲染为（{match}）=>（）

将子项路由为（{match}）=>（）

使用路由器作为this.props.match

匹配路径作为返回值

如果路由没有路径，因此始终匹配，则 获取最接近的父匹配。路由器也是如此

---

您可以通过执行以下操作来访问：id this.props.params.id

您可以通过多种方式处理路由，而不必执行 您还可以在函数中处理它

单击时函数dosomething（id）
{
doSomething（）；
这个。道具。历史。推({
路径名：'/example/'+id
});   
}

很高兴我能正确地解释它：）

这个.props.computedMatch.params.id

，我是从computedMatch得到的。有没有办法在应用程序级别访问math.params<代码>匹配路径（）似乎是我猜测的唯一方法，但我的某些路由是动态的，因此与某些路径不匹配。@SibasishMohanty请查看此帖子：@SibasishMohanty这可能不是处理某些事情的最佳方法，但使用路由参数，除了将状态提升到公共父级甚至存储中之外，没有其他方法（flux或redux）访问整个应用程序中的值这似乎根本没有回答这个问题。由于答案不相关且不完整，所以被否决。

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}
          />
)}/>