如何在“响应”中通过url传递和检索数据
我不知道如何链接到一个特定的产品在我的简单电子商务网站的反应。文档使它看起来很简单，但是它都是针对类的，而不是像我所使用的那样的功能组件，所以也许这就是我的问题所在。
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中传递对象吗？
回答 3
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用户
发布于 2020-06-08 18:06:51
您可以简单地使用来自react-router-dom的react-router-dom钩子，如下所示：
let { book } = useParams();或者您可以使用params而不像这样破坏结构：
let params = useParams();
let book = params.book您还可以像这样将data as state发送到您的url：
<Link
to={{
pathname: "/home",
state: { fromDashboard: true }
}}
/>编辑：
为了达到您想要的目的，您需要更改Main.js文件中的这一行：
<Link to="/:book">{book.title}</Link>对此：
<Link to={{pathname:'/book',state:{book:book}}}">{book.title}</Link>并相应地改变路线：
<Switch>
<Route path="/" component={Main} />
<Route path="/book" component={Single} />
</Switch>现在，在您的Single.js文件中，您可以获得这样的book object：
首先添加import 'useLocation' from 'react-router-dom';
然后
const location = useLocation();
const book = location.state.book; // You have book object hereStack Overflow用户
发布于 2020-06-08 18:22:32
这里的<Route path="/:book" component={Single} />可以是原始数据类型，如string、number、bool等，您不能将对象作为url参数发送。
更改路由并以<Link to={{pathname:'/newRoute',state:{book:book}}}">{book.title}</Link>的形式发送图书
https://stackoverflow.com/questions/62268385
复制相似问题
腾讯云开发者
