Solved: pass data navigate react router dom

Ang pangunahing problemang nauugnay sa pagpasa ng data kapag nagna-navigate gamit ang React Router DOM ay dapat na maipasa ang data sa string ng query ng URL. Nangangahulugan ito na dapat ma-encode ang anumang sensitibong impormasyon bago maipasa, dahil makikita ito sa URL. Bukod pa rito, kung masyadong malaki ang data, maaari itong lumampas sa maximum na haba ng isang URL at magdulot ng mga error. Panghuli, kung gumagamit ka ng React Router DOM upang mag-navigate sa pagitan ng mga pahina sa loob ng isang application, dapat mo ring manual na pamahalaan ang estado at subaybayan ang mga pagbabago upang matiyak na ang lahat ng mga bahagi ay may access sa parehong data.

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Linya 1: Ini-import ng linyang ito ang useHistory hook mula sa react-router-dom library.
// Linya 3: Ang linyang ito ay nagdedeklara ng isang pare-parehong tinatawag na MyComponent na isang function na nagbabalik ng JSX.
// Linya 4: Idineklara ng linyang ito ang isang constant na tinatawag na history na nakatalaga sa useHistory hook na na-import mula sa react-router-dom.
// Linya 6: Ang linyang ito ay nagdedeklara ng function na tinatawag na handleClick na kumukuha ng isang parameter, ang data.
// Line 7: Ang linyang ito ay gumagamit ng history object upang itulak ang isang bagong ruta papunta sa stack na may pathname na '/myroute' at data ng estado na ipinasa bilang isang object.
// Mga Linya 9 – 11: Ang mga linyang ito ay nagbabalik ng JSX na naglalaman ng elemento ng button na may onClick event handler na tumatawag sa handleClick at nagpapasa ng data bilang argumento.

React Router Dom

Ang React Router DOM ay isang library sa pagruruta para sa React na nagbibigay-daan sa mga developer na gumawa at mamahala ng mga ruta sa loob ng kanilang mga application ng React. Nagbibigay ito ng mga pangunahing bahagi na kinakailangan upang makabuo ng kumplikado, maraming-pahinang web application na may React, kabilang ang mga bahagi tulad ng Link, Ruta, Lumipat, at BrowserRouter. Nagbibigay din ito ng mga tampok tulad ng dynamic na pagtutugma ng ruta at pagsubaybay sa lokasyon. Sa React Router DOM, madaling makakagawa ang mga developer ng mga application ng isang page na may maraming view at ruta nang hindi kinakailangang manual na pamahalaan ang URL o history ng browser.

Paano mo ipapasa ang data sa pamamagitan ng pag-navigate sa react-router-Dom

Sa React Router, maaaring ipasa ang data sa pamamagitan ng navigation gamit ang state object ng history API. Ang object ng estado ay naa-access sa pamamagitan ng mga props ng anumang bahagi na nai-render ng a sangkap. Upang magpasa ng data, maaari mo itong idagdag sa object ng estado kapag tumatawag sa navigate function. Halimbawa:

const { history } = this.props;
history.push({
pathname: '/some/path',
estado: { someData: 'data' }
});