Zgjidhur: kalojnë të dhënat lundrojnë reagojnë ruter dom

Problemi kryesor që lidhet me kalimin e të dhënave gjatë lundrimit me React Router DOM është se të dhënat duhet të kalojnë në vargun e pyetjes së URL-së. Kjo do të thotë që çdo informacion i ndjeshëm duhet të kodohet përpara se të kalohet, pasi do të jetë i dukshëm në URL. Për më tepër, nëse të dhënat janë shumë të mëdha, ato mund të tejkalojnë gjatësinë maksimale të një URL dhe të shkaktojnë gabime. Së fundi, nëse përdorni React Router DOM për të lundruar ndërmjet faqeve brenda një aplikacioni, duhet gjithashtu të menaxhoni manualisht gjendjen dhe të mbani gjurmët e ndryshimeve për të siguruar që të gjithë komponentët të kenë akses në të njëjtat të dhëna.

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>
  );
};

// Rreshti 1: Kjo linjë importon grepin useHistory nga biblioteka react-router-dom.
// Rreshti 3: Kjo linjë deklaron një konstante të quajtur MyComponent e cila është një funksion që kthen JSX.
// Rreshti 4: Kjo linjë deklaron një konstante të quajtur histori e cila i caktohet grepit useHistory të importuar nga react-router-dom.
// Rreshti 6: Kjo linjë deklaron një funksion të quajtur handleClick i cili merr në një parametër, të dhëna.
// Rreshti 7: Kjo linjë përdor objektin e historisë për të shtyrë një rrugë të re në pirg me emrin e rrugës '/myroute' dhe gjendjen e të dhënave të kaluara si objekt.
// Linjat 9 – 11: Këto rreshta kthejnë JSX që përmban një element butoni me një mbajtës të ngjarjeve onClick që thërret handleClick dhe kalon në të dhëna si argument.

React Router Dom

React Router DOM është një bibliotekë rrugëtimi për React që lejon zhvilluesit të krijojnë dhe menaxhojnë rrugët brenda aplikacioneve të tyre React. Ai siguron komponentët thelbësorë të nevojshëm për të ndërtuar aplikacione komplekse në internet me shumë faqe me React, duke përfshirë komponentë të tillë si Link, Route, Switch dhe BrowserRouter. Ai gjithashtu ofron veçori të tilla si përputhja dinamike e rrugës dhe gjurmimi i vendndodhjes. Me React Router DOM, zhvilluesit mund të krijojnë lehtësisht aplikacione me një faqe me pamje dhe rrugë të shumta pa pasur nevojë të menaxhojnë manualisht URL-në ose historinë e shfletuesit.

Si i kaloni të dhënat përmes navigimit në react-router-Dom

Në React Router, të dhënat mund të kalohen përmes navigimit duke përdorur objektin e gjendjes së API-së së historisë. Objekti i gjendjes është i aksesueshëm nëpërmjet mbështetësve të çdo komponenti të dhënë nga a komponent. Për të kaluar të dhëna, mund t'i shtoni ato në objektin e gjendjes kur thërrisni funksionin e navigimit. Për shembull:

const { historia } = this.props;
history.push({
emri i rrugës: '/disa/rrugë',
gjendje: { someData: 'të dhëna' }
});