如何在“响应”中通过url传递和检索数据
如何在“响应”中通过url传递和检索数据
提问于 2020-06-08 18:00:01
我不知道如何链接到一个特定的产品在我的简单电子商务网站的反应。文档使它看起来很简单，但是它都是针对类的，而不是像我所使用的那样的功能组件，所以也许这就是我的问题所在。
App.js
import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" component={Main} />
<Route path="/:book" component={Single} />
</Switch>
</div>
</Router>Main.js
const Main = () => {
return (
<div id="main">
{data.map((book, i) => {
return (
<div key={i} className="squares">
<img
src={images[book.picture]}
className="covers"
alt="book cover"
/>
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<h3>
**<Link to="/:book">{book.title}</Link>**
</h3>
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<p>
Author: <em>{book.author}</em>
</p>
<p>
Price: <strong>{book.price}$</strong>
</p>
<p>{book.inventory} left in stock</p>
</div>Single.js
const Single = (props) => {
let { book } = useParams();
console.log(book); //prints :book我知道这是典型的this.props.match.params.book，所以我想我只需要去掉‘这个’，但很明显，我遗漏了一些东西。在我的功能之前，我试过它，在我的功能中，任何我能想到的。不允许在url中传递对象吗？
Stack Overflow用户
回答已采纳
发布于 2022-11-15 18:15:47
问题出在这里-
<Link to="/:book">{book.title}</Link>这就是React给出的确切格式，以及每个试图帮助我复制这个错误的人，这就是为什么给出的所有答案都不适合我的原因。这个链接将我发送到localhost:3000/:book，因为这是文字字符串。
我需要的答案是
<Link to={`/${i}`}>>{book.title}</Link>您将注意到，我传递的是id而不是对象本身。传递对象也是可能的，但在我的例子中，最好的方法是传递id，然后我用来检索这本书。
不管怎样，我遗漏的部分是字符串周围的特殊字符，这些字符让应用程序知道url是一个动态值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62268385
复制相关文章
相似问题
腾讯云开发者
