React Router LINK不传递参数 [英] React Router LINK does not pass parameters

问题描述

我有一个React有声读物搜索应用程序.它按作者姓氏从Librivox中获取数据，并显示书籍列表.列表中的每个项目都有一个链接，该链接又转到一个单独的完整图书数据组件，该组件将显示 该特定书籍(或用户从列表中选择的任何书籍)的所有数据.

在我生命中，我无法获得完整的数据组件来从URL(路线)中获取书籍ID:

链接使用的路由定义:

    <Route path="/book/:id" component={BookDataDisplay}/>

BookListItem组件(在SearchResults组件中)生成以下内容:

 <p><Link to={"/book/" + bookObject.id}>DISPLAY FULL BOOK DATA</Link></p>

已生成实际链接:

  http://jstest.dd:8083/react_librivox_search/book/3277

但是BookDisplay组件永远不会获得this.props.params，它仍然是一个空对象.图书显示组件的render()方法可以使用，但是没有数据可用于填充图书显示，因为this.props.params.id变量从不从URL中获取"3277" ID号(没有图书) id，我无法抓取数据.)

任何想法可能出了什么问题.我一直在想是否必须定义PropTypes或ContextTypes才能使传递的参数起作用，但是在文档中我什么也看不到，其中指出传递仍然可以起作用，但是一旦定义了Route和参数后，传递就会自动进行. /p>

我正在使用Redux，但是我认为这个问题与Redux无关，除非Redux抢占了所有组件，并且使它们全部依赖于更新Redux商店(我没有将整本书清单发送到单个图书数据显示组件).

解决方案

由于这是一个新帐户，因此我无法发表评论.我也有同样的问题.您确定拼写正确吗?

因为this.props.params.id变量从不从URL抓取"3277" ID号

您是否尝试过 this.props.match.params.id?

---

这是我在另一个组件中的<Link>

<Link to={`/profile/${this.state.comment.User.id}`}>@{this.state.comment.User.name}</Link>

我的路线

{/* ProfileView */}
<Route path="/profile/:user_id" component={ProfileView} />

效果很好...

I have a React audiobook search application. It grabs data from Librivox by author last name and displays a list of books. Each item in the list has a link that in turn goes to a separate full book data component that displays all the data for that particular book (or whatever book the user selects from the list).

For the life of me, I cannot get the full data component to grab the book id from the URL (route):

Route defnition used by Link:

    <Route path="/book/:id" component={BookDataDisplay}/>

The BookListItem component (in SearchResults component) generates the following:

 <p><Link to={"/book/" + bookObject.id}>DISPLAY FULL BOOK DATA</Link></p>

Actual link generated:

  http://jstest.dd:8083/react_librivox_search/book/3277

But the BookDisplay component never gets this.props.params, which remains an empty object. The render() method for the book display component engages, but there is no data with which to populate the book display, since the this.props.params.id variable never grabs the "3277" id number from the URL (without the book id, I cannot grab the data).

Any idea what might be going wrong. I have been wondering whether I have to define PropTypes or ContextTypes to get the parameter passing to work, BUT I DO NOT SEE ANYWHERE IN THE DOCUMENTATION where it is stated that the passing works anyway but automatically once you have defined the Route and parameters.

I am using Redux, but I don't think that this issue has anything to do with redux, UNLESS redux commandeers ALL components and makes them ALL depend on updating the Redux store (I am not sending the whole book list down to the individual book data display component).

解决方案

Since this is a new account I can't comment. I had this same problem too. Are you sure you have spelled it correctly?

since the this.props.params.id variable never grabs the "3277" id number from the URL

Have you tried this.props.match.params.id ?

---

This is my <Link> in another component

<Link to={`/profile/${this.state.comment.User.id}`}>@{this.state.comment.User.name}</Link>

And my Route

{/* ProfileView */}
<Route path="/profile/:user_id" component={ProfileView} />

and it works well...

这篇关于React Router LINK不传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！