Question

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

对于我的生活，我无法从URL（路径）获取完整的数据组件来获取图书ID：

Link使用的路由定义：

    <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变量从不抓取＆＃34; 3277＆＃34;来自URL的id号（没有book id，我无法获取数据）。

知道可能出现的问题。我一直想知道是否必须定义PropTypes或ContextTypes以使参数传递起作用，但我不会在文档中看到任何地方说明传递仍在工作但是一旦你定义了路由和参数就会自动工作。 / p>

我正在使用Redux，但我不认为这个问题与redux有任何关系，除非redux指挥所有组件并使它们全部依赖于更新Redux商店（我没有发送整个书籍列表到单个书籍数据显示组件。）

Answer 1

由于这是一个新帐户，我无法发表评论。我也有同样的问题。你确定你拼写正确吗？

因为this.props.params.id变量从不抓住＆＃34; 3277＆＃34;来自网址的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} />

并且效果很好......

Answer 2

你可以试试吗

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

让我知道它是怎么回事。

嗨，我看了你的留言。

@Peter嗨，好像你有其他React代码的错误。你能否分享它实际引发错误的源代码？此外，最好使用＆＃34; name =＆＃39; pageName＆＃39; ＆＃34;在您的路线标记中。如果您想从其他页面检索参数，请使用

const {bookObjectId} = this.params;

Answer 3

我创建了一个类似的设置，它对我有用

URL - file:///Users/Arjun/react/static/index.html#/book/1

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

您可以捆绑您的js（如果您使用的是webpack或任何其他框架），然后以隐身/隐私浏览模式运行应用程序，以确保您拥有在浏览器上运行的所有最新更改。浏览器历史记录/缓存很可能导致问题。

Answer 4

有一种方法可以传递多个参数。您可以将“to”作为对象而不是字符串传递。

<Route path="/category/:catId" component={Category} / >

const newTo = { pathname: "/article/595212758daa6810cbba4104", param1: "Par1" };

<Link to={newTo}> </Link>

this.props.match.params.id // this is 595212758daa6810cbba4104 
this.props.location.param1 // this is Par1

React Router LINK不传递参数

4 个答案: