useNavigate():
useNavigate() njw Hook. useNavigate() është futur në React Router v6 për të
zëvendësuar grepin useHistory(). Në versionin e mëparshëm, grepa useHistory()
akseson objektin e historisë së Router-it React dhe lundron te ruterët e tjerë duke
përdorur metodat e shtytjes ose zëvendësimit. Ndihmon për të shkuar në URL-në
specifike, faqet përpara ose prapa. Në versionin e përditësuar, API-ja e re e
navigimit të Router-it React ofron një grep useNavigate() i cili është një version i
domosdoshëm për të kryer veprimet e navigimit me përputhshmëri më të mirë.
Tani le të kuptojmë funksionimin e grepit useNavigate() duke përdorur shembuj.
Krijimi i aplikacionit React dhe instalimi i modulit:
Hapi 1: Për të filluar, krijoni një aplikacion React duke përdorur komandën e
mëposhtme:
npx create-react-app <project_name>;
Hapi 2: Instaloni versionin më të fundit të react-router-dom në aplikacionin React
si më poshtë.
npm install react-router-dom
Struktura e projektit: Krijoni një dosje me emrin komponentë në dosjen src dhe
shtoni skedarët Home.js dhe About.js në të. Struktura e dosjes do të duket si më
poshtë:
Shembull: Në këtë shembull, ne do të përdorim useNavigate() hook për të
lundruar në faqen rreth dhe për t'u kthyer në faqen kryesore. Nga kodi i
mëposhtëm, përdoruesi mund të kthehet në faqen kryesore nga faqja Rreth në
butonin e klikimit.
Home.js:
import React from 'react';
import {useNavigate} from "react-router-dom"
const Home = () => {
const navigate = useNavigate();
return (
<>
<h1 style={{color:"green"}}>GeeksForGeeks</h1>
<button onClick={()=>navigate("/about")}>About</button>
</>
)
};
export default Home;
About.js:
import React from 'react';
import {useNavigate} from "react-router-dom"
const About = () => {
const navigate = useNavigate();
return (
<>
<h1 style={{color:"green"}}>A Computer Science portal for geeks.</h1>
<button onClick={()=>navigate(-1)}>Go Back Home</button>
</>
)
};
export default About;
Shënim: Këtu, argumenti numerik ka kaluar për të lëvizur treguesin e stivës së
historisë.
App.js:
import React from "react";
import {BrowserRouter,Routes,Route} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/about" element={<About/>}/>
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Hapi për të ekzekutuar aplikacionin: Hapni terminalin dhe shkruani komandën e
mëposhtme.
npm start
Prodhimi: Në mënyrë të ngjashme, ne mund të kalojmë argumentet numerike për
të shkuar përpara.
Çfarë janë Hooks?
Hooks janë një shtesë e re në React 16.8. Ata i lejojnë zhvilluesit të përdorin
gjendjen dhe veçoritë e tjera të React pa shkruar një klasë Për shembull- Gjendja
e një komponenti Është e rëndësishme të theksohet se grepa nuk përdoren
brenda klasave. Pse keni nevojë për Hooks? Ka shumë arsye përgjegjëse për
prezantimin e Hooks, të cilat mund të ndryshojnë në varësi të përvojës së
zhvilluesve në zhvillimin e produktit React.
Çfarë është një API?
API-të janë mekanizma që mundësojnë dy komponentë softuerësh të
komunikojnë me njëri-tjetrin duke përdorur një sërë përkufizimesh dhe
protokollesh. Për shembull, sistemi softuerik i byrosë së motit përmban të dhëna
ditore të motit. Aplikacioni i motit në telefonin tuaj "flet" me këtë sistem
nëpërmjet API-ve dhe ju tregon përditësimet ditore të motit në telefonin tuaj.