Solvita: Uzu la apon History React Router v6

La ĉefa problemo rilate al uzado de History React Router v6 estas, ke ĝi ne subtenas hash-bazitan vojigon. Ĉi tio signifas, ke ĉiuj URL-oj devas esti absolutaj vojoj, kio povas malfaciligi administri kaj konservi la aplikaĵon. Aldone, ne ekzistas enkonstruita subteno por dinamikaj itineroj, kio povas esti problemo dum kreado de kompleksaj aplikoj kun pluraj paĝoj. Fine, History React Router v6 ne provizas ajnan subtenon por servilflanka bildigo, kiu povas esti necesa en iuj kazoj.

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

// Ĉi tiu kodo importas la komponentojn BrowserRouter, Ŝaltilo, Itinero kaj useHistory el la biblioteko react-router-dom.
// Ĝi tiam kreas funkcion nomitan App kiu uzas la useHistory-hokon por krei historian objekton.
// Ĉi tiu historia objekto estas uzata en funkcio nomita handleClick kiu puŝas novan eniron sur la historian stakon kiam ĝi estas vokita.
// La App-funkcio tiam resendas iom da JSX kiu inkluzivas butonon kun onClick-traktilo, kiu vokas handleClick kiam oni klakas.
// Fine, estas Ŝaltilo-komponento kun unu Itinera komponento ene de ĝi, kiu prezentas la NewLocation-komponenton kiam ĝia vojo kongruas kun "/new-location".

Kio estas uzoHistorio

useHistory estas React Hook provizita de React Router, kiu permesas al komponantoj aliri la historian objekton por navigi programe. Ĝi povas esti uzata por puŝi novajn lokojn al la historia stako, anstataŭigi la nunan lokon, iri tien kaj reen en historio, ktp.

Kiel mi ricevas itineron historion en reagi

En React Router, vi povas akiri itineran historion uzante la hokon useHistory. Ĉi tiu hoko donas aliron al la historia ekzemplo, kiun vi povas uzi por navigi, iri tien kaj reen en la historio de via programo, kaj pli. Por uzi ĝin, simple importu la hokon de React Router kaj poste voku ĝin en via komponanto:

importi { useHistory } de 'react-router-dom';

const MyComponent = () => {
const historio = uzoHistorio();

// Nun vi povas aliri la itinerhistorion per objekto `historio`.

reveni (...);
}

Ĉu reaga enkursigilo uzas historian API

Jes, React Router uzas la HTML5 History API por konservi trakon de la nuna loko kaj ĝia historio. Ĉi tio permesas al React Router ĝisdatigi la paĝon sen devi reŝargi ĝin, igante navigadon pli rapida kaj pli glata. La History API ankaŭ permesas profundan ligon, kio faciligas al uzantoj kunhavigi ligilojn, kiuj kondukas ilin rekte al specifa paĝo en aplikaĵo.