Как работать с Link в React Router

Зачем нужен Link в React Router?

Когда вы работаете над веб-приложением, одна из главных задач — это обеспечить плавную и быструю навигацию без полной перезагрузки страницы. В этом помогает React Router, предоставляя компонент Link, который заменяет стандартный HTML-тег <a>.

Первый пример: Создание базовой навигации с помощью Link

1. Установите React Router в ваш проект:npm install react-router-dom

2. Настройте маршрутизацию в приложении. Для этого импортируйте BrowserRouter, Routes и Route, а также создайте несколько компонентов для страниц.

3. Используйте Link для навигации между страницами. Например:

import React from 'react';

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';



function Home() {

  return <h1>Welcome to the Home Page</h1>;

}



function About() {

  return <h1>About Us</h1>;

}



function App() {

  return (

    <Router>

      <nav>

        <Link to="/">Home</Link>

        <Link to="/about">About</Link>

      </nav>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </Router>

  );

}



export default App;

В приведенном выше коде Link заменяет стандартные ссылки <a> для перемещения между страницами. При этом обновляется только содержимое компонента, связанного с текущим маршрутом, а не вся страница.

Особенности использования Link

Link предоставляет гибкость и дополнительные возможности, которых нет у стандартного <a>. Вот несколько ситуаций, где вы можете раскрыть его потенциал.

Второй пример: Добавление стилей к активным ссылкам
Когда пользователь переходит на определенную страницу, полезно визуально выделить текущую ссылку. Для этого можно использовать компонент NavLink, который расширяет функциональность Link:

import React from 'react';

import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';



function App() {

  return (

    <Router>

      <nav>

        <NavLink

          to="/"

          style={({ isActive }) => ({

            fontWeight: isActive ? 'bold' : 'normal',

            color: isActive ? 'blue' : 'black',

          })}

        >

          Home

        </NavLink>

        <NavLink

          to="/about"

          style={({ isActive }) => ({

            fontWeight: isActive ? 'bold' : 'normal',

            color: isActive ? 'blue' : 'black',

          })}

        >

          About

        </NavLink>

      </nav>

      <Routes>

        <Route path="/" element={<h1>Home Page</h1>} />

        <Route path="/about" element={<h1>About Page</h1>} />

      </Routes>

    </Router>

  );

}



export default App;

Здесь используется проп style, который позволяет передавать функцию для настройки стилей активной ссылки.

Третий пример: Использование параметров маршрута с Link
В React Router вы можете передавать параметры в маршруты и использовать их в компонентах. Например, если у вас есть страница деталей пользователя, она может принимать идентификатор в URL:

import React from 'react';

import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';



function User() {

  const { id } = useParams();

  return <h1>User ID: {id}</h1>;

}



function App() {

  return (

    <Router>

      <nav>

        <Link to="/user/1">User 1</Link>

        <Link to="/user/2">User 2</Link>

      </nav>

      <Routes>

        <Route path="/user/:id" element={<User />} />

      </Routes>

    </Router>

  );

}



export default App;

Этот пример демонстрирует, как передавать параметры в URL с помощью Link. Компонент User извлекает параметр id с помощью хука useParams.

Расширенные возможности Link

С Link можно работать на более сложных уровнях, например, передавать состояние и обрабатывать динамические маршруты.

Четвертый пример: Передача состояния через Link
Иногда нужно передать данные между страницами без использования глобального состояния. Для этого можно использовать Link с пропом state:

import React from 'react';

import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';



function Details() {

  const location = useLocation();

  const { from } = location.state || {};

  return <h1>Details Page (navigated from: {from})</h1>;

}



function App() {

  return (

    <Router>

      <nav>

        <Link to="/details" state={{ from: 'Home Page' }}>Go to Details</Link>

      </nav>

      <Routes>

        <Route path="/details" element={<Details />} />

      </Routes>

    </Router>

  );

}



export default App;

В этом коде состояние передается через Link, а затем извлекается в компоненте Details с помощью хука useLocation.