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

IT技术 javascript reactjs react-router
2021-01-25 17:52:17

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

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

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 number)

我很难理解的事情是例如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>

2个回答

为了在您的组件中接收路径参数，您需要首先将您的组件与withRouterHOC from连接，react-router以便您可以访问 Router props 并params从matchprops获取路径作为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) ;

或者只是在路由中使用渲染props传递它

<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) true 如果整个 URL 匹配（没有尾随字符）
  • 路径 - （字符串）用于匹配的路径模式。用于构建嵌套 s
  • url - （字符串）URL 的匹配部分。用于构建嵌套 s

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

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

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

this.props.computedMatch.params.id, 我是从计算匹配中得到的
2021-03-23 17:52:17
有没有办法在应用程序级别访问 math.params ？matchPath()似乎是我猜的唯一方法，但我的一些路线是动态的，因此与某些路径不匹配。
2021-03-23 17:52:17
很高兴我能够正确解释它:)
2021-03-30 17:52:17
@SibasishMohanty 请查看这篇文章：stackoverflow.com/questions/52684017/...
2021-04-04 17:52:17
@SibasishMohanty 这可能不是处理某些事情的最佳方式，但是使用 Route 参数，除了将状态提升到公共父级甚至存储（flux 或 redux）以访问整个应用程序的值之外别无他法
2021-04-09 17:52:17

您可以通过执行 this.props.params.id 来访问 :id

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

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

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

这似乎至少不能回答这个问题。由于不相关且不完整的答案而被否决。
2021-04-02 17:52:17
其它你可能感兴趣的问题
上一篇我的 javascript 返回此错误：$.ajax 不是函数 下一篇如何使用 jquery 从父元素中删除文本（不删除内部元素）