React Router V6 gebruiken: een beginnershandleiding

React Router is de populairste bibliotheek die je kunt gebruiken om routing te implementeren in React-toepassingen. Het biedt een componentgebaseerde aanpak voor het afhandelen van een verscheidenheid aan routingtaken, waaronder paginanavigatie, queryparameters en nog veel meer.

React Router Versie 6 implementeert aanzienlijke wijzigingen in het routeringsalgoritme om tekortkomingen die inherent waren aan eerdere versies van de software te verhelpen en een geavanceerder en efficiënter routebeheersysteem te leveren.

Aan de slag met routing met React Router V6

Om het proces te starten, kunt u een React-applicatie maken of een React-project configureren met Vite als ontwikkelserver. Zodra het project is opgezet, introduceert u de bibliotheek react-router-dom in de afhankelijkheden van het project.

 npm install react-router-dom 

Routes creëren met React Router

Het inkapselen van de volledige applicatie in een BrowserRouter component is een effectieve manier om routes te creëren. Om dit te bereiken, moet u de relevante JavaScript-bestanden bijwerken, zoals index.jsx of main.jsx . Door de voorgestelde wijziging door te voeren, heb je met succes een basis gelegd voor routering binnen je applicatie.

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
)

Door de BrowserRouter-wrapper rond de Application-component te gebruiken, krijgt u volledige toegang tot de routingfunctionaliteit en -mogelijkheden van de React Router-bibliotheek, die de hele applicatie omvat.

Het gebruik van de Routes-component

Zodra uw toepassing is omgeven door de BrowserRouter-component, is het mogelijk om de routeringsconfiguratie af te bakenen.

De Routes-component vertegenwoordigt een aanzienlijke vooruitgang ten opzichte van zijn voorganger, de Switch-component, in termen van functionaliteit binnen React Router. Dit component biedt ondersteuning voor relatieve routing, waardoor vloeiende overgangen tussen verschillende delen van de applicatie mogelijk zijn; het beschikt ook over automatische route-ranking, waardoor gebruikers naar de meest relevante inhoud worden geleid op basis van hun navigatiegeschiedenis; bovendien kan het overweg met geneste routes, waardoor ontwikkelaars eenvoudig complexe hiërarchieën van pagina’s kunnen maken.

Over het algemeen worden routes gedefinieerd in het hoofdonderdeel van een applicatie, zoals het App-onderdeel. Hun plaatsing kan echter variëren afhankelijk van de specifieke organisatiestructuur van een project.

Open het bestand “App.jsx” dat zich in uw projectmap bevindt en vervang de standaard React-code die zich daarin bevindt door de onderstaande sjabloon:

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  )
}

export default App 

De bovengenoemde routeringsinstellingen leiden aangewezen URL-paden naar hun respectieve pagina-elementen, namelijk Dashboard en Over, en garanderen zo dat de applicatie het juiste element weergeeft wanneer het wordt geopend via een specifiek URL-adres.

Denk aan de functionaliteit van de eigenschap ’element’ in het onderdeel Route, waarmee een functioneel onderdeel kan worden overgebracht in plaats van alleen de naam ervan te identificeren. Een dergelijke regeling maakt het mogelijk om eigenschappen door te sturen via gerouteerde paden en hun overeenkomstige elementen.

Maak in de bronmap een nieuwe mapsectie met de naam “pages” en voeg twee nieuwe bestanden toe met de titels “Dashboard.jsx” en “About.jsx”. Gebruik deze bestanden om te experimenteren met verschillende routes.

CreateBrowserRouter gebruiken om routes te definiëren

In de React Router documentatie wordt aanbevolen om de component createBrowserRouter te gebruiken om de routeringsconfiguratie voor React webapplicaties te definiëren. Dit component is een lichtgewicht alternatief voor BrowserRouter, dat een array van routes als argument neemt.

Door dit element op te nemen, is er geen routedefinitie meer nodig binnen het App-component. In plaats daarvan is het mogelijk om alle routeconfiguraties vast te leggen in het bestand index.jsx of main.jsx.

Zeker, hier is een verfijnde weergave van die verklaring:scss Laten we bijvoorbeeld eens kijken naar een scenario waarin je dit element gebruikt:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
); 

Het gebruik van de createBrowserRouter en RouterProvider componenten vergemakkelijkt het opzetten van een routeringsinfrastructuur binnen een React-gebaseerde toepassing, waarbij gebruik wordt gemaakt van hun mogelijkheden om gebruikersnavigatie effectief te leiden door de verschillende onderling verbonden pagina’s of functionaliteiten van het programma.

In deze specifieke implementatie is er een verschil met de conventionele aanpak waarbij de BrowserRouter-component de volledige applicatie inkapselt. In plaats daarvan wordt de RouterProvider component gebruikt om de Router context over te brengen naar elk onderdeel binnen de software door middel van zijn voorzienigheid.

Implementeren van Page-Not-Found Routes

De functionaliteit van de path prop binnen de context van de React Router’s Route component ligt in de mogelijkheid om een vergelijking uit te voeren tussen het opgegeven pad en de huidige URL, met als uiteindelijke doel te bepalen of deze overeenkomen voor een succesvolle navigatie.

Om gevallen aan te pakken waarin geen beschikbare routes overeenkomen, is het mogelijk om een aangewezen route te maken die specifiek “404 Page Not Found”-fouten beheert. Door een dergelijke route in te bouwen, wordt het voor eindgebruikers mogelijk om begrijpelijke antwoorden te krijgen in omstandigheden waarin ze een ongeldige URL proberen te openen.

Om een 404-route in de toepassing op te nemen, moet je deze als volgt in het RouteComponent opnemen:

 // using the Route component
<Route path="*" element={<NotFound />} />

 // using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

We maken een aangepast NotFound component dat het ingebouwde React NotFoundRouteComponent uitbreidt. We zullen dit component gebruiken om te renderen wanneer een aangevraagde pagina niet wordt gevonden op de server. Om dit te bereiken, moeten we eerst Axios installeren voor het maken van API-aanvragen en het stylen van onze componenten met CSS Modules. Ten slotte zullen we deze pakketten importeren en gebruiken in onze code.

De asterisk (*) dient als een plaatshouder voor alle tekens in een reguliere expressie, waardoor het mogelijk is om gevallen te accommoderen waarin geen specifieke route is gematcht met de gegeven URL.

Programmatische navigatie met behulp van de useNavigate haak

Het gebruik van de useNavigate haak presenteert een instrumentele benadering voor het beheren van navigatie binnen software applicaties. In het bijzonder blijkt deze haak voordelig te zijn bij het navigeren in combinatie met door de gebruiker geïnitieerde acties of voorvallen, waaronder het indrukken van knoppen en het indienen van formulieren.

Je moet inderdaad de utilizeNavigate hook uit het gewaardeerde React Router pakket halen om navigatieoperaties te vergemakkelijken via de implementatie van het functionele About.jsx component.

 import { useNavigate } from 'react-router-dom'; 

Neem een gebruikersinterface-element op in de applicatie-lay-out, dat na activering de gebruiker doorverwijst naar een aangewezen pad.

 function About() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>
      // Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

Het is belangrijk op te merken dat hoewel de useNavigate hook en de useNavigation hook, die beide werden geïntroduceerd in React Router versie 6, dezelfde naamgevingsconventies hebben, ze verschillende functies en doelen hebben.

Het gebruik van de haak useNavigation geeft toegang tot relevante informatie over navigatie, inclusief de huidige navigatiestatus en verschillende aanvullende bijzonderheden. Dergelijke functionaliteit kan nuttig zijn bij het renderen van gebruikersinterfacecomponenten, zoals laadindicatoren, die een visuele weergave bieden van lopende bewerkingen.

Zeker, hier is een verfijnde weergave van het gegeven voorbeeld dat de implementatie van de useNavigation hook demonstreert:

 import { useNavigation } from "react-router-dom";

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

Het gegeven codefragment demonstreert een functioneel React-component genaamd “SubmitButton”, dat de “useNavigation” aangepaste hook gebruikt om de huidige navigatiestatus te verkrijgen. Hierdoor kan het label van de knop dynamisch worden bijgewerkt als reactie op veranderingen in de interactie van de gebruiker met de toepassing.

Ondanks hun verschillende functies is het mogelijk om zowel de “useNavigate” als de “useNavigation” haak samen te gebruiken. De eerste dient als een initiatiemechanisme voor navigatieprocessen, terwijl de tweede toegang biedt tot live navigatiegegevens die het type gebruikersinterfacefeedback bepalen dat moet worden weergegeven in de browseromgeving.

Gebruik van de useRoutes-haak

Deze haak maakt het mogelijk om routepaden samen met hun correlatieve componenten op een uitgebreide manier te specificeren, waardoor het proces van het matchen van routes en het weergeven van de relevante componenten wordt vergemakkelijkt.

Zeker, hier is een elegante illustratie die het gebruik van dit hulpprogramma demonstreert:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

Het routes object dient als bemiddelaar tussen de URL’s en hun corresponderende componenten in de applicatie. Door dit object te gebruiken, kan het App-onderdeel met succes de huidige URL toewijzen aan het respectievelijke onderdeel door gebruik te maken van het overeenstemmingsproces dat tot stand is gebracht door de gedefinieerde routes.

Door gebruik te maken van deze functie kun je je routeringsarchitectuur nauwkeurig beheren en de ontwikkeling van op maat gemaakte mechanismen voor routeafhandeling voor je specifieke applicatievereisten vergemakkelijken.

Omgaan met routing in React-toepassingen

React biedt niet inherent een oplossing voor het beheren van navigatie binnen een toepassing; React Router is echter speciaal ontworpen om in deze behoefte te voorzien door een uitgebreide set routingcomponenten en -functionaliteiten te bieden waarmee zeer responsieve en intuïtieve interfaces kunnen worden gecreëerd. Door gebruik te maken van deze functies kunnen ontwikkelaars toepassingen bouwen met naadloze navigatiemogelijkheden en een optimale gebruikerservaring.