En guide til brug af react-router-dom

For enhver ikke-triviel React-applikation skal du opdele den på flere sider. For at gøre det bliver det nødvendigt at implementere reaktionsruting.

Dette kan være et skræmmende emne i starten. Denne tutorial vil dog få dig op til hastighed med alle de nødvendige grundlæggende oplysninger. I denne tutorial vil vi bygge en app, der bruger routing.

Hvad er React Routing (Client-side Routing)

React routing er en form for klientside routing implementeret i React applikationer. Client-side routing er et alternativ til server-side routing. I server-side routing sender browseren en GET-anmodning til webserveren, hver gang du navigerer til en anden side. Denne anmodning kan tage et par sekunder, før du får et svar.

For en webapplikation, hvor du konstant bevæger dig mellem sider, skaber ventetiden en dårlig brugeroplevelse. Client-side routing er et alternativ til dette. I stedet for at forsyne browseren med HTML, bruger appen JavaScript til at generere HTML til forskellige sider.

Du behøver kun at angive en index.html-fil som et indgangspunkt, for at din app kan fungere. Dette indgangspunkt indlæser derefter din JavaScript-kode. JavaScript-pakken vil gengive sider ved at manipulere DOM, håndtere routing og implementere app-funktionalitet.

Fordi serveren kun gengiver siden index.html, kaldes applikationen en enkeltsidet applikation.

Fordele ved ruting på klientsiden

• Det skaber en bedre brugeroplevelse, da navigationen er hurtigere, og applikationen vil være mere responsiv. Med server-side routing er hver navigation en netværksanmodning med et par sekunders forsinkelse.
• Det muliggør oprettelse af offline-applikationer, da al den kode, der kræves for at køre appen, kan cachelagres lokalt. Dette giver dig mulighed for at bygge flere tilgængelige applikationer og tilbyde offline funktionalitet.
• Applikationen vil også bruge mindre data, da netværksanmodninger reduceres betydeligt, hvis alt sendes én gang, og nogle filer cachelagres lokalt.
• Det reducerer også serverbelastningen, da serveren kun skal gengive applikationen én gang. Dette står i kontrast til gengivelse på serversiden, hvor serveren løbende gengiver applikationen.

Lad os derefter diskutere, hvordan man implementerer reaktionsrouting.

Sådan implementeres React Routing

Til denne tutorial vil vi bygge en simpel noteapplikation. Den vil bestå af flere sider. Vi vil implementere routing på klientsiden ved hjælp af React Router DOM for at gøre det muligt for klienten at navigere mellem de forskellige sider. Vi vil ikke bygge alt for, at appen kan fungere. I stedet vil vi fokusere på routing.

Forudsætninger

For at følge denne vejledning skal du forstå HTML, JavaScript og React. Du skal også have Node.js og NPM installeret. Du kan downloade og installere dem samtidigt ved at installere Nodejs fra internet side. Eller følg guiden i den indlejrede YouTube-video.

Hvad vi bygger

Appen vil have flere sider. Ved at bruge react routing vil du være i stand til at navigere til forskellige sider. Designet til siderne er vist nedenfor.

Hjemmesiden gengives ved ‘/’-ruten.

Om-siden gengives ved ‘/about’-ruten.

Noter-side ved ‘/notes’-ruten.

Ny noteside på ruten ‘/notes/new’.

Du kan se hver note i sin helhed på notesiden. Denne side gengives ved ‘/routes/‘-ruten, hvor er et heltal, der repræsenterer id’et for den note, vi ønsker at læse.

Kom godt i gang

For at komme i gang skal du oprette et nyt React-projekt. Jeg skal bruge Vite, så kommandoen til at initialisere et nyt projekt er denne:

npm create vite@latest scribbble --template react

Jeg specificerede ‘scribble’ som projektnavn og React som skabelon. Dernæst vil jeg åbne VS Code ved hjælp af kommandoerne nedenfor:

cd scribbble
code .

Efter VS Code er åben, vender jeg tilbage til terminalvinduet og installerer react-router-dom. Denne pakke gør det nemmere at implementere reaktionsrouting i dine applikationer.

npm install react-router-dom

Vi vil oprette en fil, hvor vores noter skal gemmes. Opret en src/notes.js fil og tilføj følgende kode:

const notes = [
  {
    id: 1,
    title: "Note 1",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 2,
    title: "Note 2",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 3,
    title: "Note 3",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
];

export default notes;

Slet derefter filen src/App.css. Vi vil ikke bruge det i dette projekt. Sørg også for at fjerne importen for App.css-filen fra App.jsx-filen.

Erstat derefter alt i filen index.css med dette:

:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}

Derefter skal du oprette følgende filer til de sider, vi skal oprette:

• src/pages/Home.jsx
• src/pages/About.jsx
• src/pages/Note.jsx
• src/pages/NewNote.jsx
• src/pages/Notes.jsx

Opret derefter filen til navigationslinjekomponenten. Denne fil vil være placeret på src/components/NavBar.jsx

Opsætning af React Routing

Med vores app sat op, vil vi konfigurere routing i vores applikation næste gang.

Åbn filen App.jsx og slet alt indeni. Tilføj derefter følgende importer til toppen af ​​filen:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";

Vi importerer BrowserRouter-, Routes- og Routes-komponenterne fra react-router-dom. Disse vil blive brugt til at konfigurere en router. Dernæst importerede vi NavBar fra vores komponentbibliotek og adskillige sider fra vores sidefiler. Vi har ikke implementeret siderne endnu, men det gør vi snart.

Dernæst skal vi konfigurere vores app-komponent:

export default App () {

}

Derefter tilføjer vi følgende markering i vores returerklæring:

return (
    <BrowserRouter>
      
    </BrowserRouter>
)

Dette gengiver BrowserRouter, en React-komponent, der leveres af react-router-dom-komponenten. Denne komponent konfigurerer en router, der fungerer i browseren. Vores app vil være indeholdt i disse tags.

Dernæst vil vi tilføje navigationslinjen og oprette en rutekomponent.

return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          
        </Routes>
      </div>
    </BrowserRouter>
  );

Inde i BrowserRouter-elementet tilføjede vi en NavBar. Vi vil definere dette element senere, men det skaber links øverst på hver side. I stedet for at skrive det separat for hver side, vil vi oprette en NavBar.

Derefter oprettede vi et containerelement. Dette element er ikke nødvendigt for routing. Vi har lige tilføjet det for at anvende styling.

Inde i beholderen tilføjede vi komponenten Ruter. Det er her forskellige sider vil blive gengivet afhængigt af ruten browseren er på. Alt inde i ruter-komponenten vil blive gengivet, hver gang ruten ændres.

Til sidst tilføjer vi ruterne for de forskellige sider.

  return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          <Route path="/" Component={Home} />
          <Route path="about" Component={About} />
          <Route path="notes" Component={Notes}>
            <Route path="new" Component={NewNote} />
            <Route path=":id" Component={Note} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );

Hjem-komponenten vil blive gengivet, når stien er ‘/’, og Om-komponenten vil blive gengivet på ‘/about’-ruten. Notes-komponenten vil blive gengivet ved ‘/notes’-ruten. Vi har også ‘/notes/new’-ruten og ‘/notes/:id’ defineret som indlejrede ruter.

Indlejrede ruter forklaret

En rute kan indeholde indre ruter. Disse kaldes indlejrede ruter. Stien til disse indlejrede ruter vil blive knyttet til den overordnede rute for at danne den komplette sti. For eksempel vil ‘notes’ og ‘new’ ruterne blive kombineret til ‘/notes/new’.

Med hensyn til hvordan komponenterne gengives, når brugeren navigerer til den overordnede rute, vil kun den overordnede komponent blive gengivet. De overordnede og indlejrede komponenter vil dog blive gengivet sammen, når de navigerer på den indlejrede rute.

For at gengive begge komponenter sammen, skal Notes-komponenten gengive en Outlet-komponent, der specificerer, hvor Note-komponenten vil blive indlejret. Du vil se dette senere, når vi begynder at oprette siderne.

Dynamiske ruter

Indtil videre har vi specificeret den bogstavelige rute, vi ønsker at matche. For eksempel ruterne ‘/’ og ‘om’. React-router-dom giver os dog mulighed for at specificere dynamiske ruter. En dynamisk rute indeholder en del, der kan matches mod en forespørgselsparameter. Når den matches, sendes forespørgselsparameteren videre til siden.

For eksempel, inde i ‘posts’ overordnede rute, har vi en indlejret rute, der indeholder en dynamisk del specificeret af :id. Denne rute accepterer enhver tekst i stedet for :id , og den tekst bliver tilgængelig for Note-komponenten som id.

Opbygning af navigationslinjen

Vi bruger Link-komponenter i stedet for normale ankertags til at navigere ved hjælp af react-router-dom. Derfor skulle vores navigationslinje se sådan ud:

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

export function NavBar() {
  return (
    <div className="nav-container">
      <Link to="/">Scribbble</Link>
      <nav className="nav">
        <Link to="/about">About</Link>
        <Link to="/notes">Notes</Link>
        <Link to="/notes/new">New Note</Link>
      </nav>
    </div>
  );
}

Tilføj koden til src/pages/NavBar.jsx.

Udbygning af siderne

Dernæst skal vi bygge siderne. Til startsiden skal du tilføje følgende kode til src/pages/Home.jsx.

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

export function Home() {
  const navigate = useNavigate();

  return (
    <div className="home-container">
      <h1>Notes for professionals</h1>
      <div className="home-buttons">
        <button
          onClick={() => {
            navigate("/notes/new");
          }}
          className="button primary"
        >
          Start Scribbling
        </button>
        <button
          onClick={() => {
            navigate("/notes");
          }}
          className="button secondary"
        >
          View Notes
        </button>
      </div>
    </div>
  );
}

På Hjemmesiden vil vi gerne bruge knapper til at navigere. Som et resultat bruger vi useNavigate-krogen til at navigere programmatisk. Vi importerede krogen og kaldte den derefter inde i Home Component. Returværdien efter at have ringet til krogen er en funktion, du kan bruge til at navigere.

Dernæst vil vi definere siden Om. Tilføj følgende kode til din src/pages/About.jsx fil.

export function About() {
  return (
    <div>
      <h1>About</h1>
      <p>Simple Notes is the best note-taking application for professionals</p>
    </div>
  );
}

Efter dette vil vi definere siden Noter.

I denne komponent skal vi også inkludere en Outlet-komponent, der vil blive brugt til at gengive alle indlejrede ruter. Af denne grund vil vores src/pages/Notes.jsx side se sådan ud.

import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";

export function Notes() {
  const navigate = useNavigate();
  return (
    <div>
      <Outlet />
      <div className="notes-list">
        {notes.map((note) => {
          return (
            <div
              className="note"
              key={note.id}
              onClick={() => {
                navigate("/notes/" + note.id);
              }}
            >
              <h2>{note.title}</h2>
              <p>{note.body.slice(0, 100)}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Dernæst definerer vi notesiden.

Dette vil blive gengivet for en individuel note. For at beslutte, om en note skal gengives, vil Notes få adgang til det id, der er angivet i den dynamiske del af ruten. For at gøre det bruger vi userParams-krogen. Derfor bør dette være kode inde i din src/pages/Note.jsx fil:

import { useParams } from "react-router-dom";
import notes from "../notes";

export function Note() {
  const params = useParams();
  const note = notes.find((note) => note.id == params.id);
  return (
    <div className="note-container">
      <div className="note-content">
        <h2>{note.title}</h2>
        <p>{note.body}</p>
      </div>
    </div>
  );
}

Til sidst vil vi oprette NewNote-komponenten inde i src/pages/NewNote.jsx ved hjælp af følgende kode:

export function NewNote() {
  return (
    <div class="new-note-container">
      <form class="new-note-form">
        <h2>New Note</h2>
        <input type="text" name="title" placeholder="Note title" />
        <textarea rows="10" placeholder="Note text" />
        <button class="button primary">Save Note</button>
      </form>
    </div>
  );
}

På dette tidspunkt har vi skrevet al koden til applikationen. Du kan køre appen ved hjælp af npm run dev. Naviger til forskellige sider og se, hvor hurtig klient-sider-routing er.

Ulemper ved Client-side Routing

På trods af sine mange fordele har routing på klientsiden flere ulemper. Disse er forklaret nedenfor:

• Den indledende sideindlæsning kan være langsom, da hele appen skal indlæses. JavaScript-pakken kan være meget stor og kræver lange indlæsningstider.
• Fordi JavaScript genererer opmærkningen, bliver siden ikke SEO-optimeret.
• Fordi alt er afhængigt af JavaScript, vil browsere, der ikke understøtter JavaScript, eller som har JavaScript deaktiveret, ikke være i stand til at køre programmet.

Konklusion

I denne artikel dækkede vi reaktionsrouting ved at bygge et lille projekt. Selvom vi ikke dækkede alt, dækker denne tutorial begreber, du vil bruge i de fleste af de projekter, du vil arbejde på. For mere information om react-router-dom, her er officielle dokumenter.

Læs derefter denne artikel om React-formularbiblioteker.