Solvut: Uża l-app History React Router v6

Il-problema ewlenija relatata ma 'l-użu ta' History React Router v6 hija li ma jappoġġjax routing ibbażat fuq il-hash. Dan ifisser li l-URLs kollha għandhom ikunu mogħdijiet assoluti, li jistgħu jagħmluha diffiċli biex timmaniġġja u tinżamm l-applikazzjoni. Barra minn hekk, m'hemm l-ebda appoġġ integrat għal rotot dinamiċi, li tista 'tkun problema meta jinħolqu applikazzjonijiet kumplessi b'bosta paġni. Fl-aħħarnett, History React Router v6 ma jipprovdi l-ebda appoġġ għal rendering fuq is-server, li jista 'jkun meħtieġ f'xi każijiet.

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

// Dan il-kodiċi jimporta l-komponenti BrowserRouter, Switch, Route, u useHistory mil-librerija react-router-dom.
// Imbagħad toħloq funzjoni msejħa App li tuża l-ganċ useHistory biex toħloq oġġett tal-istorja.
// Dan l-oġġett tal-istorja jintuża f'funzjoni msejħa handleClick li timbotta dħul ġdid fuq il-munzell tal-istorja meta tissejjaħ.
// Il-funzjoni tal-App imbagħad tirritorna xi JSX li tinkludi buttuna b'onClick handler li jsejjaħ handleClick meta jiġi kklikkjat.
// Fl-aħħarnett, hemm komponent Switch b'komponent wieħed tar-Rotta ġewwa fih li jirrendi l-komponent NewLocation meta l-passaġġ tiegħu taqbel "/new-location".

X'inhu l-Istorja tal-użu

useHistory huwa React Hook ipprovdut minn React Router li jippermetti lill-komponenti jaċċessaw l-oġġett tal-istorja sabiex jinnavigaw b'mod programmatiku. Jista 'jintuża biex timbotta postijiet ġodda għall-munzell tal-istorja, tissostitwixxi l-post attwali, tmur lura u 'l quddiem fl-istorja, eċċ.

Kif nista 'nikseb l-istorja tar-rotta f'reazzjoni

F'React Router, tista' tikseb l-istorja tar-rotta billi tuża l-ganċ useHistory. Dan il-ganċ jagħti aċċess għall-istanza tal-istorja li tista' tuża biex tinnaviga, tmur lura u 'l quddiem fl-istorja tal-app tiegħek, u aktar. Biex tużah, sempliċement importa l-ganċ minn React Router u mbagħad sejjaħlu fil-komponent tiegħek:

importazzjoni { useHistory } minn 'react-router-dom';

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

// Issa tista' taċċessa l-istorja tar-rotta permezz ta' oġġett "storja".

ritorn (...);
}

Ir-reazzjoni tar-router juża l-istorja tal-API

Iva, React Router juża l-API tal-Istorja HTML5 biex iżżomm kont tal-post attwali u l-istorja tiegħu. Dan jippermetti lil React Router li jaġġorna l-paġna mingħajr ma jkollu għalfejn jerġa' jgħabbiha, u b'hekk in-navigazzjoni tkun aktar mgħaġġla u bla xkiel. L-API tal-Istorja tippermetti wkoll rabta profonda, li tagħmilha aktar faċli għall-utenti biex jaqsmu links li jwassluhom direttament għal paġna speċifika f'applikazzjoni.