Полное руководство по началу работы с React Router (включая Router Hooks) 🛵

Как мы все знаем, React — это JavaScript-библиотека для построения пользовательских интерфейсов, одностраничное приложение (SPA), одностраничное приложение, как видно из названия: всего одна страница, в ней нет маршрутизации и навигации. В настоящее время часто требуется механизм маршрутизации, чтобы переключаться между различными представлениями без обновления всей веб-страницы.React-RouterЭто сторонняя библиотека, которая расширяет возможности React для перехода на несколько страниц.

В этом руководстве мы рассмотрим все, что вам нужно знать, чтобы начать работу с React Router.

• Полное руководство по началу работы с React Router (включая Router Hooks) 🛵
  • Реагировать на инициализацию проекта
  • Что такое маршрутизация?
  • Настроить маршрутизацию
  • визуализировать маршрутизацию
  • Используйте ссылку для перехода по страницам
  • Передать параметры в маршрутах
  • Используйте код JS для перехода на страницу
  • перенаправить на другую страницу
  • Редирект на страницу 404
  • охранник маршрута
  • Router Hooks
    • useHistory
    • useParams
    • useLocation
  • наконец
  • Справочная документация

Реагировать на инициализацию проекта

Сначала мы инициализируем приложение React с помощью create-react-app

npx create-react-app react-router-guide

Затем добавьте следующий код вApp.jsв файле

import React from "react";
import "./index.css";

export default function App() {
  return (
    <main>
      <nav>
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </nav>
    </main>
  );
}
// Home Page
const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
);
// About Page
const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
);
// Contact Page
const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
);

const FakeText = () => (
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
);

Теперь, если вы готовы, давайте разберемся в важном вопросе: что такое маршрутизация?

Что такое маршрутизация?

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

Установитьreact-router-dom:

yarn add react-router-dom

Здесь нам нужно объяснить несколько различных зависимостей npm в библиотеке React Router, каждая из которых имеет свое назначение.

• react-router: реализует основные функции маршрутизации и используется в качестве зависимости времени выполнения для следующих пакетов.
• react-router-dom: Зависимости маршрута для веб-приложений React.На основе react-router добавлены некоторые функции в среде выполнения браузера, такие как:BrowserRouterа такжеHashRouterкомпонент, первый используетpushStateа такжеpopStateСобытия строят маршруты; последние используютwindow.location.hashа такжеhashchangeмаршрут сборки события
• react-router-native: Маршрутизируйте зависимости для приложений React Native. На основе реактивного маршрутизатора добавлены некоторые функции в реактивной среде выполнения.
• react-router-config: Библиотека инструментов для настройки статических маршрутов.

В заключение:

react-router-domполагатьсяreact-router, поэтому, когда мы используем npm для установки зависимостей, нам нужно только установить библиотеку в соответствующей среде вместо явной установки react-router. npm автоматически разрешитreact-router-domЗависимость package.json в пакете и его установка.

Разработка на основе браузера, нужно только установитьreact-router-dom; Основываясь на разработке реактивной среды, нужно только установитьreact-router-native;

Итак, мы успешно установили библиотеку маршрутизации! Далее переходим к этапу использования

Настроить маршрутизацию

Чтобы установленную библиотеку маршрутизации можно было использовать в приложении React, ее сначала необходимо загрузить сreact-router-domимпортировать вBrowserRouter

существуетApp.jsВведите следующий код в файл

import React, { Fragment } from "react";
import "./index.css";

import { BrowserRouter as Router } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
            <li>
              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
      </main>
    </Router>
  );
}

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

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

визуализировать маршрутизацию

Чтобы отобразить маршрут, нам нужно импортироватьRouteкомпоненты

ИсправлятьApp.jsдля следующего

import React, { Fragment } from "react";
import "./index.css";

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

export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
            <li>
              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
        <Route path="/" render={() => <h1>Welcome!</h1>} />
      </main>
    </Router>
  );
}

Теперь добавляем маршрут<Route path="/" render={() => <h1>Welcome!</h1>} />

RouteКомпоненты имеют множество свойств, в коде мы используемpath, renderАтрибуты

• path: путь к странице. В приведенном выше коде мы определяем/Путь используется для перехода на домашнюю страницу
• render: какая страница соответствует отображаемому пути. В коде мы отображаемh1заглавие

Итак, как мы визуализируем компоненты React? Это сказатьRouteдругое свойство компонентаcomponent

давайте обновимApp.jsдля следующего

import React, { Fragment } from "react";
import "./index.css";

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

export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
            <li>
              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>

        <Route path="/" component={Home} />
      </main>
    </Router>
  );
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
);

мы кладемrenderатрибут заменен наcomponentсделать нашHomeкомпоненты

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

Используйте ссылку для перехода по страницам

использоватьLinkВ компонентах реализован переход между страницами, давайте обновимApp.jsдля следующего

import React, { Fragment } from "react";
import "./index.css";

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

export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

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

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
);

const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
);

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
);

импортLinkПосле этого нам также нужно модифицировать код раздела навигационного меню — используйтеLinkа такжеtoзаменятьaа такжеhref, так что функция перехода между интерфейсами может быть реализована, и интерфейс не будет обновляться снова

Затем добавьте еще несколько страниц, чтобы убедиться, что наша функция перехода маршрутизации работает правильно. В коде мы добавляем два компонента маршрутизацииAboutа такжеContact

Теперь мы можем реализовать переход через интерфейс в одностраничных приложениях, но проблема все еще остается: независимо от того, к какому интерфейсу мы переходим,Homeкомпоненты будут отображать

Это потому, что в React Router, если вы определяетеpathатрибут с/в начале, потом будет совпадать каждый разHomeкомпоненты

Как это решить?

просто дайHomeмаршрут плюсexact, так что толькоpathСоответствующий компонент будет отображаться только тогда, когда значение

также с помощьюSwitchОберните маршруты, чтобы указать React Router загружать только один маршрут за раз.

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

<Switch>
  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>;

Передать параметры в маршрутах

возобновитьApp.jsдля следующего

import React, { Fragment } from "react";
import "./index.css";

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

export default function App() {
  const name = "John Doe";
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </main>
    </Router>
  );
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
);

const About = ({
  match: {
    params: { name },
  },
}) => (
  // props.match.params.name
  <Fragment>
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
);

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
);

Как видите, мы определяем константуname, затем используйте его как переход кAboutпараметры страницы

Затем мы также должны настроитьAboutПуть маршрута, чтобы страница могла получатьnameпараметр-path ="/about/:name"

следующийAboutкомпоненты могут бытьprops.match.params.nameПолучить параметры, переданные маршрутом

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

Используйте код JS для перехода на страницу

пройти черезRouteПосле включения других компонентов в компоненты верхнего уровня компоненты страницы могут получать некоторые данные, связанные с маршрутизацией, напримерprops.history

const Contact = ({ history }) => (
  <Fragment>
    <h1>Contact</h1>
    <button onClick={() => history.push("/")}>Go to home</button>
    <FakeText />
  </Fragment>
);

получил в реквизитhistoryОбъекты имеют некоторые удобные методы, такие какgoBack,goForward,pushЖдать. В коде мы используемpushМетод переходит на домашнюю страницу.

Далее давайте рассмотрим случай, когда мы хотим перенаправить на другую страницу после перехода на другую страницу.

перенаправить на другую страницу

React Router имеетRedirectКомпонент, буквально, он может помочь нам добиться перенаправления страницы.

продолжить редактированиеApp.jsдокумент

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
} from "react-router-dom";

const About = ({
  match: {
    params: { name },
  },
}) => (
  // props.match.params.name
  <Fragment>
    {name !== "tom" ? <Redirect to="/" /> : null}
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
);

При получении параметров маршрутаnameне равноtom, он автоматически перенаправит на главную страницу

Вы также можете подумать, что вы также можете использоватьprops.history.push("/")Чтобы реализовать эту функцию, здесь мы объясним

• RedirectКомпонент заменит текущую страницу, поэтому пользователь не сможет вернуться на предыдущую страницу;
• Используя метод push, пользователь может вернуться на предыдущую страницу.

Однако вы также можете использоватьprops.history.replace('/')для имитации поведения перенаправления.

Далее давайте перейдем к случаю, когда пользователь посещает несуществующий маршрут.

Редирект на страницу 404

Чтобы перенаправить на страницу 404, вы можете использоватьRouteкомпонентcomponentсвойство для отображения страницы 404. Но здесь для простоты демонстрации мы используемRouteкомпонентrenderхарактеристики

import React, { Fragment } from "react";
import "./index.css";

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

export default function App() {
  const name = "John Doe";

  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
          <Route path="/contact" component={Contact} />
          {/*404 page*/}
          <Route render={() => <h1>404: page not found</h1>} />
        </Switch>
      </main>
    </Router>
  );
}

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

Давайте продолжим и узнаем, как настроить защиту маршрута (проверку полномочий маршрутизации) в следующей части.

охранник маршрута

import React, { Fragment } from "react";
import "./index.css";

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

export default function App() {
  const name = "John Doe";
  const isAuthenticated = false;
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          {isAuthenticated ? (
            <>
              <Route path="/about/:name" component={About} />
              <Route path="/contact" component={Contact} />
            </>
          ) : (
            <Redirect to="/" />
          )}
        </Switch>
      </main>
    </Router>
  );
}

Как видите, мы объявляем переменную, имитирующую аутентификациюisAuthenticated. Затем проверьте, аутентифицирован ли пользователь. Если он проходит проверку, визуализируйте защищенную страницу. В противном случае перенаправьте на главную страницу.

Мы уже многое рассмотрели, но есть еще одна интересная часть:router hooks

Приступаем к последней части - Крючки.

Router Hooks

Маршрутизаторы облегчают нам доступhistory,location, параметры маршрутизации и т. д.

useHistory

useHistoryПомогите нам получить прямой доступ кhistory, и больше не нужно получать доступ через реквизит

import { useHistory } from "react-router-dom";

const Contact = () => {
  const history = useHistory();
  return (
    <Fragment>
      <h1>Contact</h1>
      <button onClick={() => history.push("/")}>Go to home</button>
    </Fragment>
  );
};

useParams

useParamsПомогает нам получить доступ к параметрам маршрута напрямую, а не через реквизиты.

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

export default function App() {
  const name = "John Doe";
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
        </Switch>
      </main>
    </Router>
  );
}

const About = () => {
  const { name } = useParams();
  return (
    // props.match.params.name
    <Fragment>
      {name !== "John Doe" ? <Redirect to="/" /> : null}
      <h1>About {name}</h1>
      <Route component={Contact} />
    </Fragment>
  );
};

useLocation

useLocationвернет объект местоположения для текущего URL

import { useLocation } from "react-router-dom";

const Contact = () => {
  const { pathname } = useLocation();

  return (
    <Fragment>
      <h1>Contact</h1>
      <p>Current URL: {pathname}</p>
    </Fragment>
  );
};

наконец

React Router — замечательная библиотека, которая может имитировать несколько страниц на одной странице с высоким удобством использования. (Но, в конце концов, это все еще одностраничное приложение).

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

---

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

Справочная документация

• React Router Documentation
• A Complete Beginner's Guide to React Router (Including Router Hooks)