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，以便我在this.props.book.find(:id)

内部<BookDetailedView>

Answer 1

要在您的组件中接收路径参数，您需要首先将组件与来自withRouter的{{1}} HOC连接，以便您可以访问路径道具并获取路径{{1}来自react-router道具params

示例代码：

match

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

this.props.match.params.id

来自match的反应文档

<强>匹配

匹配对象包含有关import {withRouter} from 'react-router'; class BookDetailedView extends React.Component { render() { var id = this.props.match.params.id } } export default withRouter(BookDetailedView) ;如何匹配的信息   URL。 <Route path="/details/:id" render={({match}) => ( <BookDetailedView bookStateUpdated = {this.bookStateUpdated} book = {this.state.books} id={match.params.id} /> )}/>个对象包含以下属性：


params - （object）从与路径的动态段对应的URL解析的键/值对

isExact - （boolean）如果整个网址匹配（没有尾随字符），则为true

path - （字符串）用于匹配的路径模式。用于构建嵌套的s

url - （字符串）URL的匹配部分。用于构建嵌套的s


您将在不同的地方拥有访问匹配对象：


将组件路由为<Route path>

路线渲染为（{match}）=＆gt; （）

将儿童路由为（{match}）=＆gt; （）

withRouter as this.props.match

matchPath作为返回值

如果路线没有路径，因此总是匹配，那么你将会   得到最近的父匹配。同样适用于路由器

Answer 2

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

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

＆＃13;

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

＆＃13;

并在onclick元素上绑定此函数

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

2 个答案: