React JS 101 #4: Router [туторијал]

React router е популарна библиотека за рутирање за React, која овозможува креирање на single-page апликација со повеќе погледи. Овозможува начин за дефинирање на рутите во апликацијата и мапирање на различни компоненти.

Најпрвин треба да се креира нова React апликација, повеќе за ова на следниов линк.

За да ја додате библиотеката во апликацијата, потребно е да ја извршите следнава команда во терминалот:

npm i -D react-router-dom

Оваа команда ќе го инсталира react-roter-dom пакетот во вашиот проект.

По извршување на оваа команда треба да го имате следниов резултат:

Во овој туторијал, објаснувањето за рутирање во React ќе биде преку креирање на едноставно навигациско мени (navbar).

Креирање на структурата на апликацијата

Во папката src, креираме неколку фајлови како на примерот подолу:

Фајловите имаат едноставна содржина, како на примерот подолу:

export default function Home() {
    return <h1>Home</h1>
}

Поставување на рутите

Следно, потребно е да се постават рутите во фајлот App.js, како на примерот подолу:

import Navbar from "./Navbar"
import Home from "./pages/Home"
import About from "./pages/About"
import Contact from "./pages/Contact"
import { Route, Routes } from "react-router-dom"

Креирање на компонентата Navbar

import { Link, useMatch, useResolvedPath } from "react-router-dom"

export default function Navbar() {
    return (
        <nav className="nav">
            <Link to="/" className="site-title">
                IT mk tutorials
            </Link>
            <ul>
                <CustomLink to="/contact">Contact</CustomLink>
                <CustomLink to="/about">About</CustomLink>
            </ul>
        </nav>
    )
}

function CustomLink({ to, children, ...props }) {
    const resolvedPath = useResolvedPath(to)
    const isActive = useMatch({ path: resolvedPath.pathname, end: true })

    return (
        <li className={isActive ? "active" : ""}>
            <Link to={to} {...props}>
                {children}
            </Link>
        </li>
    )
}

Креирање на компонентата App

Оваа React компонента ја дефинира структурата на апликацијата и користи ‘react-router-dom’. Ги вклучува ‘Navbar’ компонентата и ‘Routes’ компонентата, која ја дефинира рутирачката структура на апликацијата. Компонентата App во еден ‘div’ со класа ‘container’ ги враќа компонентите ‘Navbar’ и ‘Routes’ и ги извезува како стандарден извоз. (export default)

import { Route, Routes } from "react-router-dom"


function App() {
    return (
        <>
            <Navbar />
            <div className="container">
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/contact" element={<Contact />} />
                    <Route path="/about" element={<About />} />
                </Routes>
            </div>
        </>
    )
}

export default App;

Поставување на апликацијата

Во овој код пример ја поставуваме React апликацијата со ‘BrowserRoute’ од ‘react-router-dom’ за да овозможиме функционално рутирање. Со методот ‘createRoot’ од ‘reactDOM’ креираме нов React root елемент, а со методот ‘render’ ја рендерираме компонентата ‘App’.

import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
)

Резултат

Креираме и фајл style.css, а крајниот резултат е како на сликата подолу:

Целосниот код е достапен на следниов линк.

Што понатаму?

Следете го IT.mk и наскоро ќе ги објавиме преостанатите туторијали за React.