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

Question

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

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

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，以便在我的<BookDetailedView> 中创建一个this.props.book.find(:id)

Answer 1

为了在您的组件中接收路径参数，您需要首先将您的组件与来自react-router 的withRouter HOC 连接，以便您可以访问路由器道具并从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) ;

或者只是在路由中使用 render prop 传递它

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

来自match 的 React 文档

匹配

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

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

您可以在不同的地方访问匹配对象：

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

如果 Route 没有路径，因此总是匹配，您将 获得最接近的父匹配。 withRouter 也是如此

Answer 2

您可以通过以下方式访问 :id this.props.params.id

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

function doSomethingWhenClicked(id)
{
      doSomething();
      this.props.history.push({
        pathname: '/example/'+id
      });   
      
 }

并将此函数绑定到 onclick 元素上