React Router LINK 不传递参数答案

【问题标题】：React Router LINK does not pass parametersReact Router LINK 不传递参数
【发布时间】：2016-09-23 22:00:49
【问题描述】：

我有一个 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 变量从不从 URL 中获取“3277”id 编号（没有图书id，我无法抓取数据）。

知道可能出了什么问题。我一直想知道是否必须定义 PropTypes 或 ContextTypes 才能使参数传递起作用，但是我在文档中的任何地方都没有看到任何地方说明传递仍然有效，但是一旦您定义了 Route 和参数，它就会自动传递。

我正在使用 Redux，但我不认为这个问题与 redux 有任何关系，除非 redux 征用所有组件并使它们都依赖于更新 Redux 存储（我不会将整个书单发送到个人图书数据显示组件）。

【问题讨论】：

标签： reactjs hyperlink react-router

【解决方案1】：

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

因为 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} />

而且效果很好……

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

我实际上已经在使用 webpack 并创建了一个 bundle.js。我没有遇到任何其他更改的问题。当我重新加载应用程序索引页面时，它们会出现。我开始怀疑这是否不是我对 Redux 的使用。一切都包含在 Redux 提供程序中，包括单独的图书显示页面。 “App2”是通过将所有内容（原始“App”）包装在redux“connect”中而生成的主类。见下文。所以我开始认为 BookDataDisplay 组件没有按预期工作，因为它已被 Redux 征用。
您在使用 Redux 时是否必须（如必须）使用“react-router-redux”模块，如下所示？ ReactDOM.render( , document.getElementById("appdiv")); var App2 = connect(mapStateToProps,mapDispatchToProps)(App);
请注意，整个应用程序被包装在 Redux 提供程序中。并且主要的 App2 包装类是由 Redux 连接函数生成的。
react-router-redux 需要同步 url 和存储。这可以帮助您一次又一次地重播相同的动作。我不认为 react-router-redux 是这里的问题。 1 - 您是直接使用 hashHistory/browserhistory 还是使用 syncHistoryWithStore 创建历史对象？（我不认为这是问题） 2 - 你能改变你的路线到 ... 3 - 您是否在 npm 服务器上运行您的应用程序？如果这不起作用，请分享您的代码。我想不出任何其他问题。

【解决方案3】：

你可以试试吗

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

告诉我进展如何。

您好，我阅读了您的留言。

@Peter 嗨，您的其他 React 代码似乎存在错误。您能否分享实际引发错误的源代码？此外，在您的 Route 标记中包含“name='pageName'”始终是最佳实践。如果您想从其他页面检索参数，只需使用

const {bookObjectId} = this.params;

【讨论】：

我以前试过，昨天又试了一次。没运气。我还尝试使用带有链接的 onClick 事件向 Redux 存储发送操作，以尝试通过 redux 更新组件。那是一场灾难。我收到了我无法“在更新状态时更新状态”的抱怨（嗯）？使用 redux 和传递 props 尝试了各种其他方法，但都不起作用。
问题不在于获取参数。这是因为它们甚至没有被 LINK 组件发送。他们仍然是空的。 this.props.params 和 this.params 都是 {}。并不是说组件没有渲染；它是。某些东西或其他东西会干扰 react-router LINK 甚至 SENDING 属性。
你能分享你的代码的完整上下文吗？包括拥有路由器的代码的完整视图、拥有 LINK 组件的页面组件以及获取参数的新页面组件？
自发布原版以来我已经改变了一些事情。评论只允许大约 250 个字符。 . .所以我必须在这里创建一个全新的帖子。 Stackoverflow 似乎不允许你想要的那种跟进，尽管我很乐意这样做。
我已将其加载到 GITHUB。请注意，对 librivox.org 的 Ajax 调用已被禁用并被一个包含两项硬编码的书单数据对象所取代，以便它可以离线工作。但是，如果您愿意，您也可以激活 librivox.org 的实时 ajax 链接。和。 . .该项目配置为在“react_librivox_search”子目录中设置。 github.com/pkosenko/react-librivox-search

【解决方案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

【讨论】：