Ratkaistu: Käytä History React Router v6 -sovellusta

Suurin History React Router v6:n käyttöön liittyvä ongelma on, että se ei tue hash-pohjaista reititystä. Tämä tarkoittaa, että kaikkien URL-osoitteiden on oltava absoluuttisia polkuja, mikä voi vaikeuttaa sovelluksen hallintaa ja ylläpitoa. Lisäksi dynaamisille reiteille ei ole sisäänrakennettua tukea, mikä voi olla ongelma luotaessa monimutkaisia ​​sovelluksia, joissa on useita sivuja. Lopuksi History React Router v6 ei tue palvelinpuolen hahmontamista, mikä saattaa olla tarpeen joissain tapauksissa.

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

// Tämä koodi tuo BrowserRouter-, Switch-, Route- ja useHistory-komponentit react-router-dom-kirjastosta.
// Sitten se luo funktion nimeltä App, joka käyttää useHistory-koukkua historiaobjektin luomiseen.
// Tätä historiaobjektia käytetään HandelClick-nimisessä funktiossa, joka työntää uuden merkinnän historiapinoon, kun sitä kutsutaan.
// Sovellustoiminto palauttaa sitten jonkin JSX:n, joka sisältää painikkeen, jossa on onClick-käsittelijä, joka kutsuu handleClickiä napsautettaessa.
// Lopuksi on Switch-komponentti, jonka sisällä on yksi Route-komponentti, joka tekee NewLocation-komponentin, kun sen polku vastaa "/new-location".

Mikä on useHistory

useHistory on React Routerin tarjoama React Hook, jonka avulla komponentit voivat käyttää historiaobjektia navigoidakseen ohjelmallisesti. Sitä voidaan käyttää uusien paikkojen siirtämiseen historiapinoon, nykyisen sijainnin korvaamiseen, historiaan siirtymiseen edestakaisin jne.

Kuinka saan reittihistorian reagoimaan

React Routerissa saat reittihistorian useHistory-koukun avulla. Tämä koukku antaa pääsyn historian esiintymään, jonka avulla voit navigoida, liikkua edestakaisin sovelluksesi historiassa ja paljon muuta. Voit käyttää sitä tuomalla koukun React Routerista ja kutsumalla sitä sitten komponentissasi:

tuo { useHistory } osoitteesta 'react-router-dom';

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

// Nyt voit käyttää reittihistoriaa `history`-objektin kautta.

palauttaa (…);
}

Reagoiko reititin historian API:n käyttöön

Kyllä, React Router käyttää HTML5 History APIa nykyisen sijainnin ja sen historian seuraamiseen. Tämän ansiosta React Router voi päivittää sivun ilman, että sitä tarvitsee ladata uudelleen, mikä tekee navigoinnista nopeampaa ja sujuvampaa. Historia-sovellusliittymä mahdollistaa myös syvälinkityksen, mikä helpottaa käyttäjien jakamista linkkejä, jotka vievät heidät suoraan tietylle sovelluksen sivulle.