Введение в маршрутизатор React | Кодементор

Реактивный маршрутизатор — это сторонняя библиотека, созданная для решения проблемы маршрутизации в приложении React. Он охватывает API истории браузера и поддерживает синхронизацию пользовательского интерфейса приложения React с URL-адресом браузера.

Существует два пакета React Router: react-router-dom для реакции и react-router-native для React Native. Поскольку вы изучаете создание веб-приложений, вам нужно только установить react-router-dom:

npm install react-router-dom

Есть 3 основных компонента React Router, которые обычно используются в минимальной навигации: BrowserRouter, Route а также Link. Давайте узнаем о BrowserRouter а также Route первый:

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

class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
      <>
        <NavigationComponent />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </>
      </Router>
    )
  }
}

BrowserRouterкоторый импортируется как Router, действует как родительский компонент, который обертывает весь ваш компонент React. Он перехватит URL-адрес запроса браузера и сопоставит его путь с соответствующим Route составная часть. Итак, если URL-адрес браузера localhost:3000/about, Router будет принимать эту информацию, а затем искать Route компонент, который имеет path атрибут /about.

Вы определите, что будет отображаться, добавив component приписывать Route.

В примере выше exact атрибут добавлен к стандартному Route дорожка (/), так как без него любой маршрут с / также будет отображать Home компонент, вызывающий несоответствия в навигации.

Третий компонент Link используется для навигации, заменяя обычную <a> тег HTML. Это связано с тем, что обычный тег привязки HTML будет выполнять полное обновление браузера при нажатии, что не подходит для приложения React. Приложению React нужно только обновить URL-адрес, историю браузера и компонент, отображаемый без обновления браузера:

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

class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}

Вы можете попробовать рабочую демоверсию здесь.

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

Делаем динамическую маршрутизацию

Вы видели, как создать простую навигацию с помощью React Router, но большинству веб-приложений требуются более сложные функции. Вам, вероятно, нужна динамическая маршрутизация, где вы можете поместить что-то вроде /user/:idв котором React должен отобразить что-то на основе значения :id.

Старые ссылки также могут быть мертвыми, и их необходимо перенаправить на новую ссылку.

Кроме того, если URL-адрес браузера не соответствует ни одному существующему маршруту, вам необходимо отобразить страницу 404.

Вот почему вам нужно узнать еще о 2 компонентах, Switch а также Redirect. Switch это уникальный компонент, который будет отображать первое совпадение Route, затем остановитесь. Чтобы проиллюстрировать этот пример:

import { Route } from 'react-router'

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

В приведенном выше коде URL-адрес браузера /about будет соответствовать всем трем маршрутам, в результате чего все они будут отображаться и располагаться друг под другом. Теперь с помощью Switch компонент, React Router будет отображать About маршрут компонента, а затем остановитесь.

import {Switch, Route} from 'react-router';

<Switch>
  <Route path='/about' component={About} />
  <Route path='/:user' component={User} />
  <Route component={NoMatch} />
</Switch>;

Порядок Route компонент внутри Switch важно, поэтому убедитесь, что вы сначала объявили все статические маршруты, прежде чем объявлять маршруты с параметром url и маршрутом 404.

Теперь для Redirect, компонент довольно простой. Вам нужно только добавить from атрибут, который указывает старый URL и to атрибут, указывающий новый URL-адрес для ссылки.

import {Redirect} from 'react-router';

<Redirect from='/old-match' to='/will-match' />;

Вложенный маршрут

Чтобы создать вложенный маршрут, вам нужно объявить другой Route внутри родительского компонента. Например, допустим, у вас есть /users маршрут, который рендерится на компонент Users.

Давайте сделаем небольшое упражнение. Сначала создайте массив объектов, в которых хранятся пользовательские данные, подойдет следующее:

const users = [
  {
    id: '1',
    name: 'Nathan',
    role: 'Web Developer',
  },
  {
    id: '2',
    name: 'Johnson',
    role: 'React Developer',
  },
  {
    id: '3',
    name: 'Alex',
    role: 'Ruby Developer',
  },
];

Теперь создадим простую маршрутизацию в приложении:

class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
        <>
          <NavigationComponent />
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/users" component={Users} />
        </>
      </Router>
    );
  }
}

NavigationComponent — это место, где вы пишете Link Компонент для навигации по приложению:

class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About page</Link>
          </li>
          <li>
            <Link to='/users'>Users page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}

Пришло время создать компоненты для рендеринга на определенных маршрутах. Home а также About компонент будет отображать один div, а Users будет еще один Link а также Route составная часть.

Внутри компонента «Пользователи» вы отобразите список пользователей с вложенный маршрут отдельному пользователю по его идентификатору, например /users/:id:

const Home = () => {
  return <div>This is the home page</div>;
};

const About = () => {
  return <div>This is the about page</div>;
};

const Users = () => {
  return (
    <>
      <ul>
        {users.map(({name, id}) => (
          <li key={id}>
            <Link to={`/users/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path='/users/:id' component={User} />
      <hr />
    </>
  );
};

В этом коде нет ничего нового. Таким образом, вы можете написать User компонент сейчас:

const User = ({match}) => {
  const user = users.find((user) => user.id === match.params.id);

  return (
    <div>
      Hello! I'm {user.name} and I'm a {user.role}
    </div>
  );
};

А вот и кое-что новое, о чем я вам не рассказывал. Каждый раз, когда компонент отображается на определенном маршруте, компонент получает реквизиты маршрута от React Router. В компонент передаются 3 реквизита маршрута: match, location, history.

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

маршрут-реквизит.png

(Если вы открываете из Codesandbox, вы можете открыть демонстрацию в новом отдельном окне, чтобы включить React DevTool)

Обратите внимание, как вы добавляете /:id параметр URL в Users вложенный маршрут компонента. Этот идентификатор передается User компонента через match.params.id свойство объекта. Если вы передали параметр URL как /:userIdон будет передан как match.params.userId.

Теперь, когда вы знаете о свойствах маршрута, давайте проведем рефакторинг. Users компонент немного:

const Users = ({ match }) => {
  return (
    <>
      <ul>
        {users.map(({ name, id }) => (
          <li key={id}>
            <Link to={`${match.url}/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path={`${match.url}/:id`} component={User} />
      <hr />
    </>
  );
}

Как всегда, здесь является рабочей демонстрацией.

Передача реквизита компоненту Route

Вы можете подумать, что передача props в компонент Route аналогична передаче в обычный компонент:

<Route path="/about" component={About} user='Jelly'/>

К сожалению, React Router не пересылает реквизиты, введенные в Route компонент в component props, поэтому вам придется использовать другой метод.

К счастью, React Router предоставляет оказывать атрибут, который принимает функцию для вызова при совпадении URL-адресов. Этот реквизит также получает то же самое route props как component реквизит:

<Route
  path="/about"
  render={props => <About {...props} admin="Bean" />}
/>


const About = props => {
  return <div>This is the about page {props.admin}</div>;
};

Сначала вы берете данный props из React Router и передать его в компонент, чтобы компонент мог использовать match, location или же history реквизит при необходимости. Затем вы добавляете в него свои собственные дополнительные реквизиты. В приведенном выше примере используется произвольный admin реквизит как пример.

Вы можете увидеть полный код здесь.

Теперь, когда вы узнали о React Router, попробуйте реализовать его для своего приложения React!


cta-react-distilled.jpg

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *