Jak zbudować aplikację jednostronicową za pomocą React Router

Aplikacja jednostronicowa (SPA) to witryna internetowa lub aplikacja internetowa, która dynamicznie przepisuje istniejącą stronę internetową za pomocą nowych informacji z serwera WWW.

W aplikacji React komponenty pobierają zawartość witryny i renderują ją do pojedynczego pliku HTML w twoim projekcie.

React Router pomaga przejść do wybranego komponentu i renderuje go w pliku HTML. Aby z niego korzystać, musisz wiedzieć, jak skonfigurować i zintegrować React Router z aplikacją React.

Jak zainstalować router React

Aby zainstalować React Router w swoim projekcie React za pomocą npm, menedżera pakietów JavaScript, uruchom następujące polecenie w katalogu projektu:

npm i react-router-dom


Alternatywnie możesz pobrać pakiet za pomocą Yarn, menedżera pakietów, który umożliwia instalowanie pakietów bibliotek w trybie offline.

Aby zainstalować React Router za pomocą Yarn, uruchom to polecenie:

yarn add react-router-dom@6


Konfigurowanie routera reagowania

Aby skonfigurować React Router i udostępnić go w swojej aplikacji, zaimportuj BrowserRouter z React -router-dom do pliku index.js , a następnie opakuj komponent aplikacji w element BrowserRouter :

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


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);


Zapakowanie komponentu aplikacji w element BrowserRouter zapewnia całej aplikacji pełny dostęp do możliwości routera.

Routing do innych komponentów

Po skonfigurowaniu routera w aplikacji należy przystąpić do tworzenia komponentów aplikacji, kierowania ich i renderowania. Poniższy kod importuje i tworzy komponenty o nazwach „Home”, „Informacje” i „Blog”. Importuje również elementy Route i Routes z react-router-dom.

Zdefiniujesz swoje Trasy w komponencie aplikacji :

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';


function App() {
    return (
      <Routes>
        <Route path='/' element={ <Home /> } />
        <Route path='/about' element={ <About /> } />
        <Route path='/blog' element={ <Blog /> }/>
      </Routes>
    )
}

Komponent aplikacji jest głównym komponentem, który renderuje cały kod, który napisałeś w innych komponentach.

Element Routes to element nadrzędny, który otacza poszczególne trasy utworzone w komponencie aplikacji. Element Route tworzy pojedynczą trasę. Wymaga dwóch atrybutów właściwości: ścieżki i elementu .

Atrybut path definiuje ścieżkę URL zamierzonego komponentu. Pierwsza trasa w powyższym bloku kodu używa ukośnika odwrotnego (/) jako ścieżki. Jest to specjalna trasa, którą React wyrenderuje jako pierwszą, więc komponent Home renderuje się po uruchomieniu aplikacji. Nie myl tego systemu z implementacją renderowania warunkowego w swoich React Components. Możesz nadać temu atrybutowi ścieżki dowolną nazwę.

Atrybut element definiuje komponent, który będzie renderowany przez Trasę .

Praca z komponentem łącza routera reagowania

Komponent link jest komponentem React Router używanym do poruszania się po różnych trasach. Te komponenty uzyskują dostęp do różnych tras, które utworzyłeś.

Na przykład:

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


function Home() {
    return (
      <div>
        <Link to='/about'>About page</Link>
        <Link to='/blog'>Blog page</Link>
        <h1>This is the Home Page<h1/>
      </div>
    )
}

export default Home;


Komponent łącza jest prawie identyczny z tagiem zakotwiczenia HTML <a> , po prostu używa atrybutu o nazwie „to” zamiast „href”. Komponent łącza nawiguje do Trasy z odpowiednią nazwą ścieżki jako jej atrybutem i renderuje komponent Trasy.

Routing zagnieżdżony i sposób jego implementacji

Router React obsługuje routing zagnieżdżony, umożliwiając łączenie wielu tras w jedną. Jest to używane głównie wtedy, gdy istnieje pewne podobieństwo w ścieżkach URL Tras.

Po utworzeniu komponentów, które chcesz kierować, opracujesz indywidualne Trasy dla każdego z nich w komponencie aplikacji .

Na przykład:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';


function App() {
    return (
      <Routes>
        <Route path='/article' element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}

export default App;


Powyższy blok kodu importuje i kieruje utworzone komponenty Articles , NewArticle i ArticleOne . Istnieją pewne podobieństwa w ścieżkach adresów URL między trzema trasami.

Ścieżka trasy NewArticle zaczyna się tak samo jak ścieżka ścieżki artykułów , z dodanym ukośnikiem odwrotnym (/) i słowem „nowy”, tj. (/new). Jedyną różnicą między nazwami ścieżek ścieżki Artykułów i ścieżki ArtykułOne jest ukośnik (/1) na końcu nazwy ścieżki komponentu ArtykułOne .

Możesz zagnieździć trzy Trasy zamiast pozostawiać je w obecnym stanie.

jak tak:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';


function App() {
    return (
      <Routes>
        <Route path='/article'>
          <Route index element={ <Articles /> }/>
          <Route path='/article/new' element={ <NewArticle /> }/>
          <Route path='/article/1' element={ <ArticleOne /> }/>
        </Route>
      </Routes>
    )
}

export default App;


Umieściłeś trzy indywidualne Trasy w jednym elemencie Trasy . Należy zauważyć, że nadrzędny element Route ma tylko atrybut ścieżki i nie ma atrybutu elementu definiującego komponent do renderowania. Atrybut index w pierwszym podrzędnym elemencie Route określa, że ​​ta trasa jest renderowana podczas nawigowania do ścieżki adresu URL nadrzędnej trasy .

Aby Twój kod był lepszy i łatwiejszy w utrzymaniu, powinieneś zdefiniować swoje Trasy w komponencie i zaimportować je do komponentu aplikacji w celu użycia.

Na przykład:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';


function ArticleRoutes() {
    return (
      <Routes>
        <Route index element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}

export default ArticleRoutes;


Komponent w powyższym bloku kodu zawiera zagnieżdżone trasy, które wcześniej znajdowały się w komponencie aplikacji. Po utworzeniu komponentu należy go zaimportować do komponentu aplikacji i skierować za pomocą pojedynczego elementu Route .

Na przykład:

import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';


function App() {
    return (
      <Routes>
        <Route path='/article/*' element={ <ArticleRoutes /> }>
      </Routes>
    )
}

export default App;


W końcowym komponencie Route dodane symbole odwrotnego ukośnika i gwiazdki na końcu nazwy ścieżki zapewniają, że nazwa ścieżki odpowiada dowolnej nazwie ścieżki, która zaczyna się od (/article) .

React Router to więcej

Powinieneś być już zaznajomiony z podstawami tworzenia aplikacji jednostronicowych w React.js przy użyciu React Router.

W bibliotece React Router dostępnych jest wiele innych funkcji, które zwiększają dynamikę tworzenia aplikacji internetowych przez programistów.