Quiero hacer un programa cuando hago clic en algún botón, el enrutador entrega la información del botón a la página siguiente.
El componente del botón está aquí.
import React, {useState, useEffect} from 'react'; import {Route, Link} from 'react-router-dom'; function Restaurant_Item({rlist}) { const [rstData, setResData] = useState([]); const [linkName, setLinkName] = useState("abc"); let rlist_tmp = []; const goDetail = (rkey) => { setResData(rlist[rkey]) setLinkName(rlist[rkey].restName) } for (let rkey in rlist) { rlist_tmp.push( <Link to={{ pathname :"/restaurant_result", search : `?sort=${linkName}`, state: {data : rstData} }}> <div className="rst_list_cell" onClick={() => goDetail(rkey)}> <div key={rkey}> <button className="rst_list_name"> {rlist[rkey].restName} </button> <div className="rst_list_position"> {rlist[rkey].address} </div> </div> </div> </Link> ) } return (<div> {rlist_tmp} </div>); } export default Restaurant_Item;Este componente obtiene el objeto del estado. Este estado se refleja en la etiqueta div. Cuando el usuario hizo clic en esta etiqueta div sobre el restaurante, la página cambia con la página de detalles que contiene información detallada del restaurante.
Esta es la página de detalles.
import React, {useEffect} from 'react'; import {Link} from "react-router-dom"; import Restaurant_result_axios from './Restaurant_result_axios.js'; import backicon from "../assets/backicon.png"; const Restaurant_result = ({data}) => { console.log(data) return ( <div> <Link to="./restaurant_list"><img className="backicon" src={backicon} alt="backicon"/> </Link> <div className="rst_result_prom"/> <div className="rst_result_cell"> <div> <div className="rst_result_name"> </div> <div className="rst_result_position"> </div> </div> </div> </div> ); }; export default Restaurant_result;Pero encontré algún problema. Si el usuario hizo clic en la etiqueta div, el enrutador cambia de página antes de ejecutar la función goDetail. No se como solucionar este problema. ¿Puedo ejecutar la función goDetail antes del enlace?
Puede probar mi código a continuación, en el RestaurantItem Component , elimino <Link></Link> de este componente, porque desea que handleClick use primero la función goDetail para obtener algunos detalles sobre los usuarios que hacen clic en los datos. así que importo useHistory para reemplazar Link y pongo en const history. Y puse history en la función goDetail . se ve igual que su Link anterior. Puedes seguir mi código aquí:
RestaurantItem Component
import React, { useState } from "react"; import { Link, useHistory } from "react-router-dom"; function Restaurant_Item({ rlist }) { const history = useHistory(); const [rstData, setResData] = useState([]); const [linkName, setLinkName] = useState("abc"); let rlist_tmp = []; const goDetail = (rkey) => { const data = rlist[rkey]; const link = rlist[rkey].restName; setResData(data); setLinkName(link); history.push({ pathname: "/restaurant_result", search: `?sort=${link}`, state: { data: data } }); }; for (let rkey in rlist) { rlist_tmp.push( <div className="rst_list_cell" onClick={() => goDetail(rkey)}> <div key={rkey}> <button className="rst_list_name">{rlist[rkey].restName}</button> <div className="rst_list_position">{rlist[rkey].address}</div> </div> </div> ); } return <div>{rlist_tmp}</div>; } export default Restaurant_Item; para el uso de la useLocation de importación del RestaurantResult Component para acceder al estado en el que se pasa del RestaurantItem Component a través de history.push .
RestaurantResult Component
import { Link, useLocation } from "react-router-dom"; import backicon from "../assets/backicon.png"; const Restaurant_result = () => { const location = useLocation(); return ( <div> <Link to="/restaurant_list"> <img className="backicon" src={backicon} alt="backicon" /> </Link> <div className="rst_result_prom" /> <div className="rst_result_cell"> <div> <div className="rst_result_name">{location.state.data.restName}</div> <div className="rst_result_position"> {location.state.data.address} </div> </div> </div> </div> ); }; export default Restaurant_result;Acabo de probarlo en Code Sandbox aquí está el enlace: Este es Code Sandbox Link