Question

如何使用 react-router-dom v6 在 React 中的页面之间传递数据？

2022-01-25

3459

javascript reactjs routes

我尝试从主页打开一个新页面，单击列表中的项目时会传递数据。我相信我拥有的代码适用于旧版本的 react-router-dom。有人能告诉我如何在新版本的 React 中做同样的事情吗？我需要在新页面中显示 ID 和标题。

我尝试按照此处的示例 https://codesandbox.io/s/focused-wright-w8il9?file=/src/ViewUserDetails.js:354-377

错误显示 AppPage.js:15 Uncaught TypeError: 无法读取 null 的属性（读取“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;

Answer 1

我按照升级到 v6 react-router-dom 的文档解决了这个问题，最终成功了。这里是： https://reactrouter.com/docs/en/v6/getting-started/tutorial

解决方案很简单。我想我只是在寻找一个更好的从 v5 升级到 v6 的文档。

此外，如果代码对这里的任何人有帮助，我会附上它。（为了方便起见，我将“DUMMY_DATA”等一些东西重命名为“items”。无论如何，代码会清楚地解释这一点）。如果还有任何疑问，请发表评论，我会尽力回复！ :)

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;

Answer 2

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;