Nalutas: Gamitin ang History React Router v6 app

Ang pangunahing problema na nauugnay sa paggamit ng History React Router v6 ay hindi nito sinusuportahan ang hash-based na pagruruta. Nangangahulugan ito na ang lahat ng mga URL ay dapat na ganap na mga landas, na maaaring magpahirap sa pamamahala at pagpapanatili ng application. Bukod pa rito, walang built-in na suporta para sa mga dynamic na ruta, na maaaring maging problema kapag gumagawa ng mga kumplikadong application na may maraming pahina. Sa wakas, ang History React Router v6 ay hindi nagbibigay ng anumang suporta para sa pag-render sa gilid ng server, na maaaring kailanganin sa ilang mga kaso.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Ini-import ng code na ito ang mga bahagi ng BrowserRouter, Switch, Route, at useHistory mula sa react-router-dom library.
// Lumilikha ito ng function na tinatawag na App na gumagamit ng useHistory hook upang lumikha ng history object.
// Ang history object na ito ay ginagamit sa isang function na tinatawag na handleClick na nagtutulak ng bagong entry papunta sa history stack kapag ito ay tinawag.
// Ang App function ay nagbabalik ng ilang JSX na may kasamang button na may onClick handler na tumatawag sa handleClick kapag na-click.
// Panghuli, mayroong isang Switch component na may isang Route component sa loob nito na nagre-render ng NewLocation component kapag ang path nito ay tumugma sa "/new-location".

Ano ang useHistory

useHistory ay isang React Hook na ibinigay ng React Router na nagbibigay-daan sa mga bahagi na ma-access ang history object upang mag-navigate sa programmatically. Maaari itong magamit upang itulak ang mga bagong lokasyon sa stack ng kasaysayan, palitan ang kasalukuyang lokasyon, pabalik-balik sa kasaysayan, atbp.

Paano ko makukuha ang kasaysayan ng ruta bilang reaksyon

Sa React Router, maaari kang makakuha ng history ng ruta sa pamamagitan ng paggamit ng useHistory hook. Nagbibigay ang hook na ito ng access sa instance ng history na magagamit mo para mag-navigate, pabalik-balik sa history ng iyong app, at higit pa. Upang gamitin ito, i-import lamang ang hook mula sa React Router at pagkatapos ay tawagan ito sa iyong bahagi:

import {useHistory } mula sa 'react-router-dom';

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

// Ngayon ay maa-access mo na ang history ng ruta sa pamamagitan ng object na `history`.

bumalik (…);
}

Gumagamit ba ng history API ang react router

Oo, ginagamit ng React Router ang HTML5 History API upang subaybayan ang kasalukuyang lokasyon at kasaysayan nito. Nagbibigay-daan ito sa React Router na i-update ang page nang hindi kinakailangang i-reload ito, na ginagawang mas mabilis at mas maayos ang pag-navigate. Pinapayagan din ng History API ang malalim na pag-link, na ginagawang mas madali para sa mga user na magbahagi ng mga link na direktang magdadala sa kanila sa isang partikular na pahina sa isang application.

Kaugnay na mga post:

Mag-iwan ng komento