Рубрики
Без рубрики

Руководство для начинающих для реагирования маршрутизатора 4

Руководство по новичке Emmanuel Yusufu к React Router 4reaCT – это библиотека JavaScript для построения пользовательских интерфейсов. С помощью Paradigm React каждая часть UI представляет собой компонент, который управляет своим собственным автономным состоянием (данными) и функциями. Реагируйте, как и другие фрагменты в интерфейсах JavaScript, полезны для создания одного

Автор оригинала: FreeCodeCamp Community Member.

Эммануэль Юсуфу

РЕАКТ – это библиотека JavaScript для построения пользовательских интерфейсов. С помощью Paradigm React каждая часть UI представляет собой компонент, который управляет своим собственным автономным состоянием (данными) и функциями.

Реагируйте, как и другие фрагменты Front-End JavaScript, полезны для создания приложений одной страницы (SPA). Это веб-приложения, которые не нуждаются в полной странице перезагрузки на смену просмотра. Вместо этого они поменяют вид на или из раздела страницы как пользователь навигации по приложению.

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

Например:

  • Каждый вид на экран должен иметь свой собственный конкретный URL, поэтому я могу добавить в закладку страницы.
  • Кнопка вперед и назад должна двигать меня вперед или назад в моей истории просмотра.
  • Вложенные виды и те, которые с параметрами следует поддерживать, например example.com/products/shoes/101 Отказ

В React Community Read Router – это любимая библиотека для обработки маршрутизации. Наиболее убедительным аспектом этой версии библиотеки является то, что он «просто реагирует». Маршруты – это просто компоненты, которые получают на экране, когда приложение запущено. Они не определены во внешних файлах, как это сделано в других рамках.

Предпосылки

Вам понадобится следующее: Основные знания о Реагировать , Гит установлен на вашем компьютере и NPM установлен на ваш вычислений р.

Установка

Если у вас установлен Git, найдите пустой Исходные файлы (На Master филиал) и клон к вашему компьютеру, используя:

git clone https://github.com/emmyyusufu/react-router-demos.git

Откройте папку в текстовом редакторе и откройте для себя подпункты внутри:

Этот пост разделен на четыре подраздела в соответствии с папками: Базовая маршрутизация , Вложенная маршрутизация , Вложенная маршрутизация с параметрами пути и Аутентифицированная маршрутизация Отказ

Чтобы запустить демонстрацию, откройте заданную папку в вашем терминале, затем запустите NPM установить затем NPM начать Отказ

# 1 Основная маршрутизация

Давайте начнем с нуля. Обратите внимание на структуру папки основной папки маршрутизации.

Все демонстрационные в этом посте были первоначально созданы с использованием Create-React-App Отказ Это приносит некоторые преимущества, такие уже настроенные сервера WebPack, который будет объединять весь файл JavaScript в нашем приложении в bundle.js файл, который будет прикреплен к index.html файл во время выполнения. В режиме ожидания WebPack SEV Server прослушивает любые изменения в нашем файле и обновляет его как приложение работает во время разработки.

Я создал Компоненты/ папка, чтобы сохранить все наши компоненты. Обратите внимание, что:

  • index.js Входной файл для всех .js Файлы в нашем приложении. Это то, где соединение WebPack будет выполнено так все .js Файлы следует импортировать в него.
  • App.js Файл будет содержать все, касающиеся нашего приложения React.

По умолчанию Create-React-App не размещает App.js В этой папке. Но поскольку я изменил структуру папки, я сделал соответствующие изменения в URL-адрес пути и импортировал его в index.js Отказ Чтобы узнать больше о создании-реактивном приложении, это Ссылка было бы полезно.

Перейдите к первой папке 01-базовый маршрут и беги NPM установить Отказ

Открыть App.js файл, и вы должны увидеть следующее:

import React, { Component } from 'react';import '../styles/App.css';
// import route Components here
class App extends Component {  render() {    return (      
{/* Routes will go here */}
); }}
export default App;

Запустите NPM Start и просмотрите приложение. Изменения еще не сделаны.

Давайте устанавливаем React Router через NPM. С открытой папкой в вашем терминале запустите:

npm install react-router-dom

Почему React-Router-DOM ? Это связано с тем, что библиотека React Router состоит из трех пакетов: Реагистрационный маршрутизатор , React-Router-DOM и React-Router - родной Отказ

Реагистрационный маршрутизатор Является ли ядра для маршрутизатора, в то время как два других – это окружающая среда. Вы должны использовать React-Router-DOM Если вы строете для Интернета, и React-Router - родной Если вы находитесь в среде разработки мобильных приложений, используя React Nature.

Импортируйте следующее в App.js.

// import route Components hereimport {  BrowserRouter as Router,  Route,  Link,  Switch,  Redirect} from 'react-router-dom'

Позже мы поймем, что делают эти компоненты. Все компоненты маршрутизации зависят от Броситон Чтобы предоставить им истории браузера API в HTML5 браузера.

Обратите внимание, что Компоненты реагирования Имейте свою первую букву капитализируют, чтобы идентифицировать их по-разному из HTML-тегов по умолчанию.

API истории является объектом, который позволяет нам управлять текущим местоположением через История а также предыдущие места. Думать о место расположения Свойство объекта как массив. Текущее местоположение является последним элементом на массиве, и мы манипулируем массивом через такие методы, как story.push () или же история Отказ Какие-либо манипулирует на массиве, будет вызвать переход страницы к текущему местоположению. Это то, что происходит за сценой при использовании Ссылка на сайт а также Перенаправлять Компоненты, как мы скоро увидим.

Мы импортировали содержимое Броситон в Маршрутизатор Переменная. Нам нужно обернуть все наше приложение с ним, чтобы он поставлял необходимые API по всему приложению. В App.js Добавлять:

import React, { Component } from 'react';import '../styles/App.css';
// import route Components hereimport {  BrowserRouter as Router,  Route,  Link,  Switch,  Redirect} from 'react-router-dom'
class App extends Component {  render() {    return (              
{/* Routes will go here */}
); }}
export default App;

<Маршрут/> компонент

Давайте начнем исследуя Маршрут составная часть. Этот компонент оказывает страницу, если Текущее URL Расположение соответствует путь опора указано в нем. Это также принимает Компонент , оказывать и дети реквизит.

Давайте создадим нашу, где его написано {/* Маршруты пойдут сюда */}:

Но эти компоненты не существуют! Да, ты прав.

Опять прежде, прежде чем мы создадим их, давайте добавим больше импорта в App.js Отказ Импорт из Hellocomponent.js , Aboutcomponent.js и Bookscomponent.js Использование Привет , О и Книги как переменные. Компонент = {} Опоры используют фигурные скобки для ссылки на переменные не строки.

import React, { Component } from 'react';import '../styles/App.css';
import Hello from './HelloComponent';import About from './AboutComponent';import Books from './BooksComponent';
// import route Components hereimport {  BrowserRouter as Router,  Route,  Link,  Switch,  Redirect} from 'react-router-dom'

Обратите внимание, что оказывать похож на Компонент = {} Но это позволяет нам определять компонент, встроенный и прямо там:

 {           return (              

Hello, world!

); }}/>

Перейти к пустую Hellocomponent.js Файл и вставка:

import React from 'react';
const Hello = () => {    return (        

Hello, world!

);}
export default Hello;

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

Если вы не заметили, мы используем стили Bootstrap 4 в нашем App.csss Файл, следовательно, Jumbotron класс в Div Отказ

// inside App.css. You'll need internet connection to load the Bootstrap 4 styles.
.App {  padding-top: 50px;}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');

Перейти к пустую Aboutcomponent.js Файл и вставка:

import React from 'react';
const About = () => {    return (        

About Me

);}
export default About;

Наконец, отправляйтесь к пустую Bookscomponent.js Файл и вставка:

import React from 'react';
const Books = () => {    return (        

My Books

);}
export default Books;

Еще одна вещь, которую нам нужно завершить этот раздел, это Ссылка составная часть.

Компонент

Это заменяет по умолчанию t; HTML Tag. Я T ACC EPTS A PROP, который указывает на местонахождение URL, мы хотим пойти.

Внутри App.js Замените якорные теги по умолчанию с помощью Ссылка :

  • Hello
  • About
  • Books

Беги NPM начать С вашего терминала и посмотрите полное приложение:

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

Это нормально, но помните, что другие пути имеют / в них. Так что, если мы посетили другие URL, такие как Привет , и /Книги , Главная Компонент будет продолжать отображаться по умолчанию. Чтобы исправить это, напишите еще один опора точный Установка его на правда или просто напишите точный Отказ

Это обеспечит бы Главная Компонент отображается только в тех случаях, когда URL это точно соответствует этому: / Отказ

Создать новый HomeComponent.js Файл в Компоненты/ папка. Вставьте это в:

import React from 'react';
const Home = () => {    return (        

Landing page

);}
export default Home;

Импорт в App.js.

import Home from './HomeComponent';

Добавить в список маршрутов

Посетить http://localhost: 3000 и просмотр:

Есть некоторые эксперименты. Удалить точный = {правда} Из домашнего маршрута и посмотрите, что происходит. Вы увидите, почему это важно.

Компонент

Это потребует обмотки вокруг Маршрут компоненты при необходимости для реализации. Когда путь URL посещается, он позволяет только первым <Роу TE> это соответствует пути к оказанию.

Ранее у нас была проблема с / рендеринг Главная компонент и другие пути. Если мы создадим /HELLO/GOODMORNNING Путь, что произойдет? Компоненты Привет и /HELLO/GOODMORNNING путь будет оказан. Переключатель поможет в этом случае снова, выбрав только один маршрут для рендеринга, но на самом деле должен быть организован самый важный маршрут.

Использование Переключатель , мы можем избежать того, что происходит на изображении выше, но только для URL, кроме / Отказ точный = {правда} обрабатывает это для / Отказ Помните, что Переключатель выберу только первое сопоставление Маршрут Отказ Позвольте поставить его на работу и увидеть результат.

             { return      

Goodmorning

}} />

Кроме того, Переключатель Позволяет указать маршрут для рендера, если URL-адрес не совпадает с местоположением. Для этого маршрута оставьте путь опора пустой.

// Just an example. Don't implement. This catch-all Route would be at the bottom if implemented.

Таким образом Переключатель сделаю следующее:

  • Избегайте инклюзивного рендеринга маршрута.
  • Включите ловкий путь в нижней части нашего контейнера для коммутатора.

# 2 вложенная маршрутизация

Помните, что мы могли бы сделать компоненты через Маршрут встроенный или указав компонент:

Или же

 { return 

Soemthing

}/>

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

  • матч
  • место расположения
  • история

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

  • Пармы – (Объект) Пары клавиш/значение, анализируют от URL, соответствующие динамическим сегментам пути.
  • Isexact – (Boolean) True, если весь URL был сопоставлен (без конечных персонажей).
  • путь – (строка) шаблон пути, используемый для совпадения. Полезно для создания вложенного <маршрут> S
  • URL – (строка) Сопоставленная часть URL. Полезно для создания вложенного s

Мы хотим добавить новые маршруты под /Книга маршрут. Они будут книги:

  • HTML
  • CSS.
  • Реагировать

Перейдите к второй подпункте 02 – Маршрутизация на вашем терминале и запустить NPM установить Отказ

В вашем кодовом редакторе открыть Bookcomponent.js и изменить:

const Books = ({ match }) => {    return (

My Books

  
      
  • HTML
  • CSS
  • React
               {/* place routes here */}      
   
);}

Давайте устанавливаем React Router через NPM. С открытой папкой в вашем терминале запустите:

npm install react-router-dom

Мы продемонстрировали синтаксически, что Матч Объект пропускается как реквизит Отказ Помните, что используемые классы предназначены для стилей Bootstrap, чтобы вступить в силу. Не забудьте импортировать все компоненты React Read Router после Importing React:

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

Нам не нужно было импортировать их все, но мы все равно сделали. Поместите маршруты:

 { return 

HTML by Ducket book

}}/> { return

CSS by Racheal Andrews

}}/> { return

React by Fullstack.io book

}}/>

Мы используем встроенный компонент, чтобы сэкономить время. Теперь давайте заполним к = "" Ссылка и Путь = "" Маршрут Отказ

Сделайте эти изменения:

  • HTML
  • CSS
  • React
       { return 

HTML by Ducket book

}}/> { return

CSS by Racheal Andrews

}}/> { return

React by Fullstack.io book

}}/>

$ {match.url} оценивает /Книги и $ {match.path} оценивает localhost://3000/Книги. Используемые задними тиками являются способ ES6, способ для объединения строк, содержащих переменные.

Дайте ему сохранить, беги NPM начать и просмотреть рабочее приложение.

# 3 вложенная маршрутизация с параметрами пути

Любой URL, который заканчивается /: ID , /: Пользователь или /: все, что Указывает, что эта часть представляет собой динамически сгенерированную часть URL, которая может быть любое значение.

Мы можем получить доступ к таким частям через match.params.id для использования в маршрутизации.

Опять откройте третью подпункту 03 – вложенные маршрутизаторы с параметрами PATH В вашем терминале и запустите NPM установить Отказ

Также давайте устанавливаем React Router через NPM. С открытой папкой в вашем терминале запустите:

npm install react-router-dom

Чтобы проиллюстрировать, как параметры пути могут быть использованы для маршрутизации, вставьте следующее в Book.js :

import React from 'react';import {    BrowserRouter as Router,    Route,    Link,    Switch,    Redirect  } from 'react-router-dom';
const Books = ({ match }) => {    return (        

My Books

  • HTML
  • CSS
  • React
{ return

HTML by Ducket book

}}/> { return

CSS by Racheal Andrews

}}/> { return

React by Fullstack.io book

}}/>
);}
const Child = ({ match }) => (    

URL ID parameter: {match.params.id}

);
export default Books;

Беги NPM начать Отказ

# 4 Охраняемая дорожка маршрутизации

Этот вид маршрутизации предназначен для страниц веб-сайта, который нужен пользователь, чтобы войти и быть аутентификацией перед просмотром таких страниц. Пример – это Админ страница.

Для обработки защищенных путей нам нужно будет использовать (стандартный компонент) и (пользовательский компонент).

<Приваряет E/> не станет STA ndard & l T; маршрут/> компонент. Стандартный компонент маршрута, предоставленный REA CT маршрут R <маршрут/> ; Мы будем исправить Ne /> как Наш собственный пользовательский <маршрут/>.

Пользовательские маршруты необходимы, когда нам нужно принять решение о том, является ли E/> представляет интерес должен быть оказан или нет. Как вы увидите в коде, мы будем Список Терут/> вместе с ОТ ее <маршрут/> с.

Компонент

Рендеринг перейдет на новое местоположение. Новое расположение будет переопределять текущее местоположение в стеке истории, например, для перенаправления на стороне сервера (HTTP 3xx).

имеет пару реквизитов, но мы будем использовать Объект принципиально так:

При использовании это будет перенаправляться на /Вход дорожка. Информация о последнем месте до перенаправления было сделано, будет доступна Loginpage Компонент через This.props.location.state Отказ

Перейдите к последней подпапке 04-аутентификация-маршрутизация Отказ Беги NPM установить Отказ

Установите React Router через NPM. С открытой папкой в вашем терминале запустите:

npm install react-router-dom

Открыть App.js и добавить новый список /admin предмет к существующим.

  • Hello
  • About
  • Books
  • Admin

Добавить <Приваряет E/> ; и /Вход на пути к группе EXI Щетка & l T; маршрут/> с.

                                                                                  

Теперь создайте <Приваряет E/> Компонент Outsi Де компонента приложений:

const PrivateRoute = ({ component: Component, ...rest }) => (   (    fakeAuth.isAuthenticated ? (          ) : (          )  )}/>)

<Приваряет E/> в конечном итоге сделает вид к & LT; маршрут> COM Понитен. Компонент <маршрута> использует тройную работу, чтобы определить, что рендерировать на основе того, является ли пользователь Lo Защел или Не: t; к Страница входа или страница администратора.

Создать Админ составная часть:

const Admin = () => {  return (    

Admin Access granted

);}

Также создайте Вход составная часть:

class Login extends React.Component {      constructor() {      super();        this.state = {        redirectToReferrer: false      }      // binding 'this'      this.login = this.login.bind(this);    }      login() {        fakeAuth.authenticate(() => {        this.setState({ redirectToReferrer: true })      })    }      render() {      const { from } = this.props.location.state || { from: { pathname: '/' } }      const { redirectToReferrer } = this.state;        if (redirectToReferrer) {        return (                  )      }        return (        

Login required

You must log in to view the page at {from.pathname}.

Login

) } } /* A fake authentication function */ export const fakeAuth = { isAuthenticated: false, authenticate(cb) { this.isAuthenticated = true setTimeout(cb, 100) }, }

Это Вход Компонент реализует функцию поддельных аутентификации, которая установит пользователя либо войти в систему или OUT.

Беги NPM начать и увидеть рабочее приложение.

Это приводит нас к концу статьи. КУДО вам, если вы сделали это далеко. Если вы хотите больше подробностей о React Router, просмотрите Документы Отказ

Если вы хотите заполнить версию кода, посетите заполненную филиал на Github Отказ

Не стесняйтесь поддерживать меня ( devapparel.co ) и хорошо выглядеть в этом. Также комментировать или поделитесь этим постом. Спасибо за прочтение!

Первоначально опубликовано Zeolearn Blog .