Estoy tratando de abrir una nueva página desde la página de inicio donde se pasan los datos al hacer clic en el elemento de la lista. Creo que el código que tengo funciona para versiones anteriores de react-router-dom. ¿Alguien puede decirme cómo puedo hacer lo mismo en la versión más nueva de React? Necesito mostrar el ID y el título en la nueva página.
Traté de seguir el ejemplo aquí https://codesandbox.io/s/focused-wright-w8il9?file=/src/ViewUserDetails.js:354-377
El error dice AppPage.js: 15 TypeError no detectado: no se pueden leer las propiedades de nulo (leyendo 'DUMMY_DATA')
Si hay alguna corrección de lo contrario también, corríjame. Soy nuevo en esto.
Gracias.
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;Resolví esto siguiendo una documentación para actualizar a v6 react-router-dom y finalmente funcionó. Aquí está: https://reactrouter.com/docs/en/v6/getting-started/tutorial
La solución fue sencilla. Solo estaba buscando una mejor documentación para actualizar de v5 a v6, supongo.
Además, adjuntaré el código si va a ayudar a alguien aquí. (He cambiado el nombre de algunas cosas como 'DUMMY_DATA' a 'items' solo para mi comodidad. El código lo explicaría claramente de todos modos). Si tienes más dudas, comenta e intentaré responder. :)
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;datos.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;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;