如何在页面之间传递数据，并与React路由器-dom v6进行交互？
我正在尝试从主页打开一个新页面，在主页上单击列表中的项目传递数据。我认为，我的代码适用于较早版本的react路由器-dom。有人能告诉我如何在新版本的React中做同样的事情吗？我需要在新页面中显示ID和标题。
我试着效仿这里的例子，https://codesandbox.io/s/focused-wright-w8il9?file=/src/ViewUserDetails.js:354-377
错误表示AppPage.js:15 Uncaught TypeError:无法读取空(读'DUMMY_DATA')的属性
如果有任何其他更正，请纠正我。我是新来的。
谢谢。
GridList.js
import React from "react";
import ReactDOM from "react-dom";
import { Link, useNavigate } from "react-router-dom";
import { Component } from "react";
import GridItem from "./GridItem";
import AppPage from "./AppPage";
import classes from "./GridList.module.css";
import App01 from "./app-01.png";
import App02 from "./app-02.png";
const GridList = (props) => {
const DUMMY_DATA = [
{
title: "tic tac toe",
id: 1,
image: App01,
},
{
title: "snake",
id: 2,
image: App02,
},
];
return (
<div className={classes.gridc1}>
{DUMMY_DATA.map((item) => {
return (
<div key={item.id}>
<Link
to={{
pathname: `/apppage/${item.id}`,
state: { DUMMY_DATA: item },
}}
>
<GridItem key={item.id} image={item.image} />
</Link>
</div>
);
})}
</div>
);
};
export default GridList;AppPage.js
import React from "react";
import {ReactDOM, render } from "react-dom";
import { useLocation } from "react-router-dom";
import { Component } from "react";
const AppPage = _ => {
const { state }= useLocation();
return (
<div>
<p>{state.DUMMY_DATA.id}</p>
<p>{state.DUMMY_DATA.title}</p>
</div>
);
};
export default AppPage;回答 2
Stack Overflow用户
发布于 2022-01-30 05:23:49
我已经解决了这个问题，下面是一个升级到v6的文档-路由器-域，它最终起作用了。这里是：https://reactrouter.com/docs/en/v6/getting-started/tutorial
解决办法很简单。我想，我只是在寻找一个更好的文档，用于从v5升级到v6。
还有，我会附加密码，如果它能帮助到这里的任何人。(为了方便起见，我把一些像“DUMMY_DATA”这样的东西改名为“项目”。不管怎么说，代码都能解释清楚)。如果有任何疑问，请发表评论，我将尽力回复！:)
GridList.js
import React from "react";
import ReactDOM from "react-dom";
import { Link, useParams } from "react-router-dom";
import { Component } from "react";
import GridItem from "./GridItem";
import AppPage from "./AppPage";
import classes from "./GridList.module.css";
import { getItems } from "./Data";
let items = getItems();
const GridList = (props) => {
return (
<div className={classes.gridc1}>
{items.map((item) => {
return (
<div key={item.id}>
<Link to={`/apppage/${item.id}`} key={item.id}>
<GridItem key={item.id} image={item.image} />
</Link>
</div>
);
})}
</div>
);
};
export default GridList;Data.js
import React from "react";
import ReactDOM, { render } from "react-dom";
import App01 from "./app-01.png";
import App02 from "./app-02.png";
let items = [
{
title: "tic tac toe",
id: 1,
image: App01,
},
{
title: "bytes",
id: 2,
image: App02,
},
];
export function getItems() {
return items;
}
export function getItem(id) {
return items.find((item) => item.id === id);
}AppPage.js
import React from "react";
import ReactDOM, { render } from "react-dom";
import { useParams } from "react-router-dom";
import { Component } from "react";
import { getItem } from "./Data";
const AppPage = _ => {
let params = useParams();
let item = getItem(parseInt(params.id, 10));
return (
<div>
<p ptitle = {item.title} />
<p pid = {item.id}> />
</div>
);
};
export default AppPage;Stack Overflow用户
发布于 2022-01-25 20:50:34
import React from "react";
import ReactDOM, { render } from "react-dom";
import Body from "../ui/Body";
import Head from "../ui/Head";
import Tail from "../ui/Tail";
import { useLocation } from "react-router-dom";
import { Component } from "react";
const AppPage = () => {
//don't forget to use this, good luck :)
const { state } = useLocation();
return (
<div>
// and use "state", don't use static
// what is static ?
<p>{state.DUMMY_DATA.id}</p>
<p>{state.DUMMY_DATA.title}</p>
</div>
);
};
export default AppPage;https://stackoverflow.com/questions/70855260
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号