React

Router

Routing

В любом реальном веб-приложении нужны маршруты, и приложение React не исключение. Пользователь должен видеть, где он находится в приложении в любой момент времени.

Routing

То есть, если мы введём в адресную строку например https://rozetka.com.ua/computers-notebooks, то приложение должно направить нас на страницу списка ноутбуков.

Также должна работать история. То есть когда пользователь кликает на стрелку "Назад" в браузере, приложение должно направить нас на предыдущую страницу.

react-router

Эта библиотека популярна, довольна проста в использовании и обладает хорошей документацией. Она предоставляет такие возможности как:

Навигация по клику (компонент <Link>)
Перенаправление (компонент <Redirect>)
Маршрутизация (компонент Route)
История (свойство history)

предыдущая версия v5 http://reacttraining.com/react-router/web/guides/quick-start

нова версия v6 https://reactrouter.com/docs/en/v6/getting-started/overview#installation

react-router

  "react-router-dom": "^6.2.1"

Добавим в наш package.json

https://github.com/remix-run/react-router#readme

https://www.npmjs.com/package/react-router-dom

https://learn-reactjs.ru/training-project/routing

react-router

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import App from "./App";

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

ReactDOM.render((
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    ), document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Теперь подключим в наше приложение. Webpack решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.

react-router

Добавим маршруты в App.jsx

import React from "react";
import {
    Routes,
    Route,
} from "react-router-dom";
import Home from "./Home";
import Users from "./Users";

export default function App() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />} />
      </Routes>
    );
}

react-router

Добавим навигацию

export default function App() {
    return (
        <Router>
            <div>
                <nav>
                  <Link to="/">Home</Link>{" "}
                  <Link to="users">Users</Link>
                </nav>

               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="users" element={<Users />} />
               </Routes>
            </div>
        </Router>
    );
}

react-router

Добавим вложенные роуты

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="invoices" element={<Invoices />}>
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}

function Home() {
  return <h1>Home page</h1>;
}

function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}

function Invoice() {
  let { invoiceId } = useParams();
  return <h1>Invoice {invoiceId}</h1>;
}

function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

export default App;

react-router

Добавим навигацию (Link) к вложенным роутам.

import * as React from "react";
import "./App.css";

import {
    Routes,
    Route,
    Link,
    Outlet, useParams
} from 'react-router-dom';

function App() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="invoices" element={<Invoices />}>
                <Route path=":paramId" element={<Invoice />} />
                <Route path="sent" element={<SentInvoices />} />
            </Route>
        </Routes>
    );
}

function Invoices() {
    return (
        <div>
            <h1>Invoices</h1>
            <nav>
                <Link to="invoices">Invoices</Link> |{" "}
                <Link to="dashboard">Dashboard</Link>
                <Link to="sent">Set</Link>
            </nav>
            <Outlet />
        </div>
    );
}

function Invoice() {
    let { invoiceId } = useParams();
    return <h1>Invoice {invoiceId}</h1>;
}


function SentInvoices() {
    return <h1>Sent Invoices</h1>;
}


function Home() {
    return (
        <>
            <h1>Home</h1>
            <Link to="invoices">Invoices</Link>
        </>
    );
}

export default App;

UI Components

React Components

React Router

By Oleg Rovenskyi

React

React Router

More from Oleg Rovenskyi