Роуты и ссылки

#description

Роуты и ссылки это очень важная тема в React, так как они позволяют создавать SPA (Single Page Application).

В React для работы с роутингом можно использовать библиотеку React Router. Она позволяет создавать динамические маршруты и переходы между страницами без перезагрузки страницы браузера.

Пример использования React Router:

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

const Home = () => {
  return <h2>Home</h2>;
};

const About = () => {
  return <h2>About</h2>;
};

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};

export default App;

В этом примере мы создаем две страницы: Home и About, и две ссылки на эти страницы с помощью компонента Link.

Классический пример для роутинга выглядит так:

"/" - показать Home-страницу

"/about" - показать About-страницу

Компонент BrowserRouter используется для установки корректной истории браузера, чтобы пользователи могли использовать кнопки "назад" и "вперед".

Компонент Route используется для привязки компонента к заданному пути. В примере выше, компонент Home будет отображаться при пути "/", а компонент About будет отображаться при пути "/about".

Компонент Link здесь используется для создания ссылок на эти роуты, которые будут отображаться в навигационном меню.

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

March 25, 2023

Если вам не совсем понятен какой-то абзац текста из лекции, просто нажмите на него и сможете задать уточняющие вопросы по нему.

Если же непонятен весь вопрос, то нажмите на кнопки внизу, чтобы получить новый вариант объяснения, практические примеры или критически оценить сам вопрос.

Developer learning path

Роуты и ссылки в React

Роуты и ссылки