React Router LINK 不传递参数

IT技术 reactjs hyperlink react-router
2021-05-13 02:56:09

我有一个 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 存储（我不会将整个书籍列表发送到单个书籍数据显示组件）。

4个回答

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

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

它运作良好......

显示在 Chrome 开发者控制台中工作的更改

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

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

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

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

你能试试吗

 <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;

有一种方法可以传递多个参数。您可以将“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 Native 下一篇创建一个可以用函数调用显示的 React 组件（如 react-toastify