W przypadku każdej nietrywialnej aplikacji React należy ją podzielić na wiele stron. Aby to zrobić, konieczne staje się wdrożenie routingu reagującego.
Na początku może to być onieśmielający temat. Jednak dzięki temu samouczkowi opanujesz wszystkie niezbędne podstawy. W tym samouczku będziemy budować aplikację korzystającą z routingu.
Spis treści:
Co to jest routing React (routing po stronie klienta)
Routing React to forma routingu po stronie klienta zaimplementowana w aplikacjach React. Routing po stronie klienta jest alternatywą dla routingu po stronie serwera. W przypadku routingu po stronie serwera przeglądarka wysyła żądanie GET do serwera WWW za każdym razem, gdy przechodzisz na inną stronę. Odpowiedź na tę prośbę może zająć kilka sekund.
W przypadku aplikacji internetowej, w której stale przełączasz się między stronami, czas oczekiwania pogarsza komfort użytkownika. Alternatywą dla tego jest routing po stronie klienta. Zamiast udostępniać przeglądarce kod HTML, aplikacja używa JavaScript do generowania kodu HTML dla różnych stron.
Aby aplikacja mogła działać, wystarczy podać plik Index.html jako punkt wejścia. Ten punkt wejścia następnie ładuje kod JavaScript. Pakiet JavaScript będzie renderował strony poprzez manipulację DOM, obsługę routingu i implementację funkcjonalności aplikacji.
Ponieważ serwer renderuje tylko stronę Index.html, aplikacja nazywana jest aplikacją jednostronicową.
Zalety routingu po stronie klienta
- Zapewnia lepsze doświadczenie użytkownika, ponieważ nawigacja jest szybsza, a aplikacja jest bardziej responsywna. W przypadku routingu po stronie serwera każda nawigacja jest żądaniem sieciowym z kilkusekundowym opóźnieniem.
- Umożliwia tworzenie aplikacji offline, ponieważ cały kod wymagany do uruchomienia aplikacji może być przechowywany lokalnie w pamięci podręcznej. Dzięki temu możesz tworzyć więcej dostępnych aplikacji i oferować funkcjonalność offline.
- Aplikacja będzie również zużywać mniej danych, ponieważ żądania sieciowe znacznie się zmniejszą, jeśli wszystko zostanie wysłane raz, a niektóre pliki będą buforowane lokalnie.
- Zmniejsza to również obciążenie serwera, ponieważ serwer musi wyrenderować aplikację tylko raz. Kontrastuje to z renderowaniem po stronie serwera, gdzie serwer stale renderuje aplikację.
Następnie omówmy, jak zaimplementować routing reagujący.
Jak zaimplementować routing React
Na potrzeby tego samouczka stworzymy prostą aplikację do robienia notatek. Będzie się składać z wielu stron. Wdrożymy routing po stronie klienta przy użyciu React Router DOM, aby umożliwić klientowi nawigację pomiędzy różnymi stronami. Nie będziemy budować wszystkiego, aby aplikacja działała. Zamiast tego skupimy się na routingu.
Warunki wstępne
Aby skorzystać z tego samouczka, musisz znać HTML, JavaScript i React. Będziesz także musiał mieć zainstalowany Node.js i NPM. Możesz je pobrać i zainstalować jednocześnie, instalując Nodejs z pliku strona internetowa. Możesz też postępować zgodnie z instrukcjami zawartymi w osadzonym filmie YouTube.
Co budujemy
Aplikacja będzie miała wiele stron. Korzystając z routingu reagującego, będziesz mógł nawigować do różnych stron. Poniżej przedstawiono projekty stron.
Strona główna jest renderowana na trasie „/”.
Strona Informacje jest renderowana na trasie „/about”.
Strona notatek na trasie „/notes”.
Nowa strona notatek na trasie „/notes/new”.
Możesz zobaczyć każdą notatkę w całości na Stronie Notatek. Ta strona jest wyświetlana na trasie „/routes/
Pierwsze kroki
Aby rozpocząć, utwórz nowy projekt React. Będę używać Vite, więc polecenie inicjowania nowego projektu jest następujące:
npm create vite@latest scribbble --template react
Podałem „bazgroły” jako nazwę projektu i React jako szablon. Następnie otworzę VS Code za pomocą poniższych poleceń:
cd scribbble code .
Po otwarciu VS Code wrócę do okna terminala i zainstaluję React-router-dom. Ten pakiet ułatwia implementację routingu reagującego w aplikacjach.
npm install react-router-dom
Stworzymy plik, w którym będą przechowywane nasze notatki. Utwórz plik src/notes.js i dodaj następujący kod:
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;
Następnie usuń plik src/App.css. Nie będziemy go używać w tym projekcie. Pamiętaj także o usunięciu importu pliku App.css z pliku App.jsx.
Następnie zamień wszystko w pliku Index.css na:
: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}
Następnie utwórz następujące pliki dla stron, które będziemy tworzyć:
- src/pages/Home.jsx
- src/pages/About.jsx
- src/pages/Note.jsx
- src/pages/NowaNota.jsx
- src/pages/Notes.jsx
Następnie utwórz plik dla komponentu Pasek nawigacji. Plik ten będzie zlokalizowany w src/components/NavBar.jsx
Konfigurowanie routingu React
Po skonfigurowaniu naszej aplikacji następnie skonfigurujemy routing w naszej aplikacji.
Otwórz plik App.jsx i usuń wszystko z niego. Następnie dodaj następujący import na górze pliku:
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";
Importujemy komponenty BrowserRouter, Routes i Routes z React-router-dom. Posłużą one do skonfigurowania routera. Następnie zaimportowaliśmy pasek NavBar z naszego katalogu komponentów i kilka stron z plików naszych stron. Nie wdrożyliśmy jeszcze stron, ale wkrótce to zrobimy.
Następnie skonfigurujemy nasz komponent aplikacji:
export default App () {
}
Następnie dodajemy następujący znacznik w naszej instrukcji return:
return (
<BrowserRouter>
</BrowserRouter>
)
To renderuje BrowserRouter, komponent React dostarczany przez komponent React-router-dom. Ten komponent konfiguruje router działający w przeglądarce. Nasza aplikacja będzie zawarta w tych tagach.
Następnie dodamy pasek nawigacyjny i utworzymy komponent Trasy.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
</Routes>
</div>
</BrowserRouter>
);
Wewnątrz elementu BrowserRouter dodaliśmy pasek NavBar. Zdefiniujemy ten element później, ale tworzy on linki u góry każdej strony. Zamiast pisać to osobno dla każdej strony, utworzymy jeden NavBar.
Następnie stworzyliśmy element kontenera. Ten element nie jest niezbędny do routingu. Właśnie dodaliśmy go, aby zastosować stylizację.
Wewnątrz kontenera dodaliśmy komponent Trasy. W tym miejscu będą renderowane różne strony w zależności od trasy, na której znajduje się przeglądarka. Wszystko wewnątrz komponentu Trasy zostanie ponownie wyrenderowane przy każdej zmianie trasy.
Na koniec dodajemy trasy dla różnych stron.
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>
);
Komponent Home będzie renderowany, gdy ścieżka to „/”, a komponent About będzie renderowany na trasie „/about”. Komponent Notes będzie renderowany na trasie „/notes”. Mamy także trasy „/notes/new” i „/notes/:id” zdefiniowane jako trasy zagnieżdżone.
Wyjaśnienie tras zagnieżdżonych
Trasa może zawierać trasy wewnętrzne. Są to tak zwane trasy zagnieżdżone. Ścieżka do tych zagnieżdżonych tras zostanie połączona z trasą nadrzędną, tworząc pełną ścieżkę. Na przykład trasy „notatki” i „nowe” zostaną połączone w „/notes/new”.
Jeśli chodzi o sposób renderowania komponentów, gdy użytkownik przejdzie do trasy nadrzędnej, renderowany będzie tylko komponent nadrzędny. Jednakże komponenty nadrzędne i zagnieżdżone będą renderowane razem podczas poruszania się po zagnieżdżonej trasie.
Aby renderować oba komponenty razem, komponent Notes musi renderować komponent Outlet, który określa, gdzie komponent Note zostanie osadzony. Zobaczysz to później, kiedy zaczniemy tworzyć strony.
Trasy dynamiczne
Do tej pory określaliśmy dosłowną trasę, którą chcemy dopasować. Na przykład trasy „/” i „about”. Jednak React-router-dom umożliwia nam określenie tras dynamicznych. Trasa dynamiczna zawiera część, którą można dopasować do parametru zapytania. Po dopasowaniu parametr zapytania jest przekazywany na stronę.
Na przykład w trasie nadrzędnej „posts” mamy zagnieżdżoną trasę zawierającą część dynamiczną określoną przez :id. Ta trasa akceptuje dowolny tekst zamiast :id i ten tekst staje się dostępny dla komponentu Note jako id.
Budowa paska nawigacji
Używamy komponentów Link zamiast zwykłych znaczników kotwicznych do nawigacji za pomocą React-Router-dom. Dlatego nasz pasek nawigacyjny powinien wyglądać następująco:
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>
);
}
Dodaj kod do src/pages/NavBar.jsx.
Tworzenie stron
Następnie będziemy budować strony. W przypadku strony głównej dodaj następujący kod do pliku 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>
);
}
Na Stronie Głównej chcielibyśmy używać przycisków do nawigacji. W rezultacie używamy haka useNavigate do nawigacji programowej. Zaimportowaliśmy hak, a następnie wywołaliśmy go w komponencie Home. Wartość zwracana po wywołaniu haka jest funkcją, za pomocą której można nawigować.
Następnie zdefiniujemy stronę Informacje. Dodaj następujący kod do pliku src/pages/About.jsx.
export function About() {
return (
<div>
<h1>About</h1>
<p>Simple Notes is the best note-taking application for professionals</p>
</div>
);
}
Następnie zdefiniujemy stronę Notatki.
W tym komponencie musimy także uwzględnić komponent Outlet, który będzie używany do renderowania wszelkich zagnieżdżonych tras. Z tego powodu nasza strona src/pages/Notes.jsx będzie wyglądać następująco.
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>
);
}
Następnie definiujemy stronę Notatki.
Zostanie to wyrenderowane dla indywidualnej notatki. Aby wybrać notatkę do wyrenderowania, program Notes uzyska dostęp do identyfikatora określonego w dynamicznej części trasy. W tym celu używamy haka userParams. Dlatego powinien to być kod znajdujący się w pliku src/pages/Note.jsx:
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>
);
}
Na koniec utworzymy komponent NewNote w pliku src/pages/NewNote.jsx, używając następującego kodu:
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>
);
}
W tym momencie napisaliśmy cały kod aplikacji. Możesz uruchomić aplikację za pomocą npm run dev. Przejdź do różnych stron i zobacz, jak szybki jest routing po stronie klienta.
Wady routingu po stronie klienta
Pomimo wielu zalet routing po stronie klienta ma kilka wad. Zostały one wyjaśnione poniżej:
- Początkowe ładowanie strony może być powolne, ponieważ konieczne jest załadowanie całej aplikacji. Pakiet JavaScript może być bardzo duży i wymagać długiego czasu ładowania.
- Ponieważ JavaScript generuje znaczniki, strona nie będzie zoptymalizowana pod kątem SEO.
- Ponieważ wszystko opiera się na JavaScript, przeglądarki, które nie obsługują JavaScript lub mają wyłączoną obsługę JavaScript, nie będą mogły uruchomić aplikacji.
Wniosek
W tym artykule omówiliśmy routing reagujący, budując mały projekt. Chociaż nie omówiliśmy wszystkiego, w tym samouczku omówimy koncepcje, których będziesz używać w większości projektów, nad którymi będziesz pracować. Więcej informacji na temat Reag-Router-dom można znaleźć tutaj oficjalne dokumenty.
Następnie przeczytaj ten artykuł na temat bibliotek formularzy React.