Узнайте, как создавать маршруты в React, чтобы вы могли создавать приложения со страницами и маршрутами в React. Это позволит вывести ваши проекты на совершенно новый уровень.

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

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

Например, чтобы отобразить компонент домашней страницы по корневому URL-адресу, можно использовать следующий код:

<Route exact path="/" component={ HomePage } />

Другие основные компоненты, которые предоставляет React Router, включают:

  • <Link>, который позволяет пользователю перейти на другую страницу
  • <Switch>, который позволяет пользователю переключаться между несколькими <Route> компонентами.
  • <Redirect>, который позволяет пользователю перенаправить пользователя на другую страницу

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

Теперь с помощью BrowserRouter, который мы назовем Router, мы можем настроить место для размещения наших страниц.

Пример:

импортировать {BrowserRouter as Router, Route, Switch} из «react-router-dom»;

// Pages
import Home from "./pages/Home";
import About from "./pages/About";
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={ Home } />
        <Route exact path="/about" component={ About } />
      </Switch>
    </Router>
  );
}
export default App;

В этом примере мы импортировали компоненты BrowserRouter и Route из библиотеки React Router. Мы также определили две страницы: Home и About. Затем мы обернули наши два компонента Route в компонент Switch, который обеспечивает визуализацию только одного компонента за раз. Наконец, мы определили пути для каждого компонента и компонент, который будет отображаться для каждого пути.

Когда пользователь посещает корневой URL-адрес, компонент Home будет отображаться. Когда пользователь посещает путь /about, будет отображаться компонент About.

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

Но что делает переключатель?

Переключатель — это компонент React Router, который позволяет пользователю переключаться между несколькими компонентами Route. Он используется для обеспечения того, чтобы одновременно отображался только один компонент. В приведенном выше примере компонент Switch обеспечивает отображение только компонента Home или About в зависимости от URL-адреса, который посещает пользователь.

Переключатели — отличный способ убедиться, что ваше приложение не отображает несколько компонентов одновременно, что может сбить с толку и привести к неожиданному поведению.

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

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

Что, если вы поместите вещи за пределы выключателя?

Любые компоненты или маршрутизация, которые определены вне компонента Switch, всегда будут отображаться. Это полезно для компонентов или маршрутизации, которые требуются на всех страницах, таких как панель навигации или нижний колонтитул. Допустим, у вас есть компонент панели навигации NavBar и компонент нижнего колонтитула Footer, которые должны отображаться на всех страницах. Вы можете определить эти компоненты вне компонента Switch следующим образом:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Pages
import Home from "./pages/Home";
import About from "./pages/About";
// Components
import NavBar from "./components/NavBar";
import Footer from "./components/Footer";
function App() {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route exact path="/" component={ Home } />
        <Route exact path="/about" component={ About } />
      </Switch>
      <Footer />
    </Router>
  );
}
export default App;

В этом примере компоненты NavBar и Footer будут отображаться на всех страницах, независимо от того, что посещает пользователь. Компонент Switch по-прежнему будет контролировать, какая страница будет отображаться, но панель навигации и нижний колонтитул всегда будут присутствовать.

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