Посібник для початківців по React Router

Або те, що я хотів би знати, починаючи з React Router.

Клацніть тут, щоб перейти до репозиторію Github Цей посібник використовує React Router версії 2.0.1 та Babel версії 6.7.4

React Router - це стандартна бібліотека маршрутизації для React. З документів:

“React Router підтримує ваш інтерфейс синхронізований з URL-адресою. Він має простий API з потужними функціями, такими як ледаче завантаження коду, динамічне узгодження маршрутів та обробка переходів місцезнаходження, вбудовані безпосередньо. Зробіть URL-адресою першою думкою, а не думкою ".

Крок 1. Початок роботи

Для початку ви можете клонувати початкове репо та перейти до другого кроку, або виконати наступні кроки та налаштувати проект вручну.

Налаштування вручну

По-перше, давайте налаштуємо наше середовище за допомогою React, Babel та webpack. Спочатку створіть папку і в неї вставте компакт-диск Потім запустіть npm init -y:

npm init -y
  • -y просто відповідає так на всі запитання

Далі встановіть реагувати, реагувати на маршрутизатор та реагувати-dom і зберігати їх як залежності:

npm i react react-dom [email protected] --save

Далі встановіть наші залежності розробника. Це будуть webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 та babel-preset-response

npm i webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Тепер давайте створимо файли конфігурації для webpack і babel:

touch .babelrc webpack.config.js

Далі, давайте створимо папку для нашого коду. Ми зателефонуємо цій програмі-папці:

mkdir app

У каталозі програми створіть три файли: index.html app.js main.js

cd apptouch index.html app.js main.js

Наша файлова структура тепер повинна виглядати так:

Тепер відкрийте файл .babelrc і додайте пресети для реакції та ES2015:

{ "presets": [ "es2015", "react" ]}

Щоб розпочати роботу, у webpack.config.js додайте таку конфігурацію:

module.exports = { entry: './app/main.js', output: { path: './app', filename: 'bundle.js' }, devServer: { inline: true, contentBase: './app', port: 8100 }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }}
Якщо ви хочете дізнатись більше про webpack та babel, перегляньте мій підручник з початку webpack.

Тепер, коли встановлено веб-пакет та babel. Створимо ярлик для webpack-dev-сервера. Відкрийте package.json і вставте наступний скрипт у ключ «скрипти»:

"scripts": { "start": "webpack-dev-server"}

Тепер ми можемо просто запустити npm start, щоб розпочати наш проект.

Давайте тепер налаштуємо наш HTML і React. Відкрийте index.html і створіть базову HTML-сторінку. Потім додайте div з ідентифікатором кореня та тег скрипта, що посилається на bundle.js:

    React Router 

Тепер давайте зайдемо в наш main.js і встановимо точку входу для нашого додатка. Введіть це у свій файл main.js:

import React from 'react'import ReactDOM from 'react-dom'import App from './app'ReactDOM.render(, document.getElementById('root'))

Тепер давайте зайдемо в app.js і створимо наш компонент програми. Відкрийте app.js і введіть наступне:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
const App = () =>

Hello World!

export default App

Ми поки не використовуємо Component або будь-який з компонентів маршрутизатора / реагуючого маршрутизатора, але залучаємо їх, щоб почати роботу з другого кроку.

Тепер, якщо ви запустите проект і перейдете до // localhost: 8100 / ви повинні отримати "Hello World !!!!!!" на екрані:

npm start

Крок 2. Основна маршрутизація

Давайте встановимо основний маршрут. Ми замінимо компонент App на клас React, який поверне компонент Router. Маршрутизатор оберне всі маршрути, які ми будемо визначати.

Кожен маршрут буде ідентифікований у компоненті. Компонент матиме дві властивості: шлях та компонент. Коли шлях відповідає шляху, заданому компоненту, він поверне вказаний компонент.

У app.js рефакторируйте компонент App, щоб виглядати так:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component { render() { return (     ) }}
const Home = () =>

Hello from Home!

const Address = () =>

We are located at 555 Jackson St.

export default App

Тепер, якщо ви перейдете до // localhost: 8100 /, ви побачите наш компонент Home, а якщо перейдете до // localhost: 8100 / # / address, ви побачите наш компонент Address.

Ви помітите, що після хешу у вашому адресному рядку є випадкові рядки:

Використовуючи хеш-історію, ви побачите додатковий елемент у рядку запиту, який виглядає приблизно так: _k = 123abc. Це ключ, який історія використовує для пошуку постійних даних стану у window.sessionStorage між завантаженнями сторінок. Детальніше читайте тут.

Якщо ви хочете отримати чистішу адресу або ви використовуєте її у виробництві, можливо, ви захочете вивчити browserHistory проти hashHistory. При використанні browserHistory у вас повинен бути сервер, який завжди повертатиме ваш сервер за будь-яким маршрутом, наприклад, якщо використовується nodejs, буде працювати така конфігурація (з документації):

const express = require('express')const path = require('path')const port = process.env.PORT || 8080const app = express()// serve static assets normallyapp.use(express.static(__dirname + '/public'))// handle every other route with index.html, which will contain// a script tag to your application's JavaScript file(s).app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'public', 'index.html'))})app.listen(port)console.log("server started on port " + port)

Щоб дізнатися більше про історію браузера, перегляньте це посилання.

До кінця цього підручника ми використовуватимемо hashHistory.

Крок 3. 404 маршрут

Що станеться, якщо ми потрапимо на маршрут, який не визначений? Давайте встановимо маршрут 404 та компонент, який повернеться, якщо маршрут не знайдено:

const NotFound = () => ( 

404.. This page is not found!

)

Тепер, під нашим маршрутом "/ адреса", створіть такий маршрут:

Тепер, якщо ми переходимо до якогось маршруту, який не був визначений (// localhost: 8100 / # / asdfasdf), ми повинні побачити наш 404 маршрут.

Крок 4. IndexRoute та посилання

Тепер додамо навігацію, щоб переходити між сторінками.

Для цього ми будемо використовувати компонент. подібний до використання тегу прив'язки html.

З документів:

Основний спосіб дозволити користувачам орієнтуватися навколо вашої програми. відобразить повністю доступний прив'язний тег із відповідним href.

Для цього давайте спочатку створимо компонент Nav. Наш компонент Nav міститиме компоненти і виглядатиме так:

const Nav = () => ( Home  Address )

Now we need a way to make our Nav component persistent across all pages. To do this, we will wrap our child routes in a main component. We will also need to update our Home component, and create a new component called Container:

Container:

const Container = (props) => {props.children} 

{props.children} will allow any routes wrapped within this route to be rendered in this component.

Now, let’s rewrite our App component to look like this. We are wrapping our HomePage, Address and NotFound routes inside the new Container route. We are also setting HomePage to be our IndexRoute. That means that when we hit //localhost:8100, our Home component will render, as it is specified as the index:

class App extends Component { render () { return (        ) }}

For reference, our full app.js code should look like this.

Now, when we navigate to //localhost:8100, we should see our Home Component rendered, along with our Nav components!

Step 5. Multiple child / IndexRoutes

Now, let’s say we want to nest a twitter feed and an Instagram feed in our address component. Let’s create that functionality.

First, let’s rewrite our address route to take two new components: InstagramFeed and TwitterFeed:

class App extends Component { render () { return (           ) }}

We’ve set the IndexRoute of address to be TwitterFeed, and have added the Instagram route there as well.

Now, let’s create our InstagramFeed and TwitterFeed components. These will be very basic just so we know we’ve hit the correct routes:

const Instagram = () =>

Instagram Feed

const TwitterFeed = () =>

Twitter Feed

Finally, go into the Address component, and add the Links to the new components as well as props.children, so the components will be rendered:

const Address = (props) =>

Twitter Feed  Instagram Feed

We are located at 555 Jackson St.

{props.children}

Now, when we navigate to //localhost:8100/#/address, the address component should be rendered as well as the TwitterFeed component:

For reference, the code up to now should look like this.

Крок 6. activeStyle / activeClassName та IndexLink

Зараз ми розглянемо, як створити стиль посилання на основі активності маршруту. Є два основні способи зробити це, або додати стиль безпосередньо, або через клас.

З документів:

може знати, коли маршрут, на який він посилається, активний, і автоматично застосовувати activeClassName та / або activeStyle, коли надається будь-який prop. Функція буде активною, якщо поточний маршрут - це пов’язаний маршрут або будь-який нащадок згаданого маршруту. Щоб посилання було активним лише на точно зв’язаному маршруті, використовуйте замість цього або встановіть лише пропцію ctiveOnIndex.

Спочатку давайте розглянемо activeStyle. Щоб застосувати activeStyle, ви просто додаєте activeStyle як властивість до a та передаєте стиль, який ви хотіли б мати:

Home

Давайте оновимо наш Nav-компонент, щоб реалізувати це:

const Nav = () => ( Home  Address  About )

Now, let’s take a look at how this looks in our browser. You may notice that when you click on address, that Home is still highlighted:

This is because when using along with activeStyle, the will be active if the current route is either the linked route or any descendant of the linked route.

This means that because Address is a descendent of Home, it stays highlighted. To fix this, we can pass the onlyActiveOnIndex property to our Link component:

Home

Now, when we look at our browser, the link will only be highlighted if we are on the exact link:

There is also a sibling component of called . that is only active when the current route is exactly the linked route.

From the docs:

An схожий на a, за винятком того, що він активний лише тоді, коли поточний маршрут є точно пов'язаним маршрутом. Це еквівалентно з набором опор onlyActiveOnIndex.

Щоб реалізувати це, спочатку введіть з React-Router:

import { ..., IndexLink } from 'react-router'

Тепер просто замініть компоненти в nav на компоненти:

const Nav = () => ( Home  Address  About )

А як щодо додавання класів проти стилів? Для цього ми можемо використовувати activeClassName. Давайте встановимо активний стиль у нашому index.html:

 .active { color:#53acff }

Тепер ми замінимо activeStyle на activeClassName у нашому Nav-компоненті:

const Nav = () => ( Home  Address  About )

Для довідки наш код тепер повинен виглядати так.

Крок 7. Іменовані компоненти

Використовуючи іменовані компоненти, ми можемо вказати компонент як реквізит для a.

З документів:

Коли маршрут містить один або кілька іменованих компонентів, дочірні елементи доступні за іменами на this.props. У цьому випадку this.props.children не буде визначено. Усі компоненти маршруту можуть брати участь у вкладенні.

Let’s now dig into the code and see how this would actually look.

First, let’s create a new Component that will be rendering our Named Components. These components will be available as props:

const NamedComponents = (props) => ( {props.title}

{props.subTitle} )

Next, let’s create two new components called Title and Subtitle:

const Title = () => ( 

Hello from Title Component

)const SubTitle = () => (

Hello from SubTitle Component

)

Now, let’s create a new route for our NamedComponents component, and define the Title and Subtitle components in the IndexRoute:

Finally, let’s add a link to our nav to navigate to this component:

Named Components

Now, we should see our new Named Components link when we look at our browser, and when clicking on the link we should see our Title and SubTitle components rendering on the screen:

For reference, our code should now look like this.

Step 8. Route Parameters

An essential part of many applications is the ability to read route parameters from a url.

To implement this, let’s revisit our About component. First, let’s rewrite the path in our Router to take an optional parameter, we’ll call it name:

Now, let’s rewrite our About component to use this name variable:

const About = (props) => ( 

Welcome to the About Page

{props.params.name}

)

Now, if we visit //localhost:8100/#/about/nader we will see my name displayed below “Welcome to the About Page”.

The only issue here is that if we revisit //localhost:8100/#/about, we get a 404 because there is no name parameter. To fix this, we can make the parameter optional by wrapping it in parenthesis:

Now, if we visit //localhost:8100/#/about we no longer get a 404, and can still access the name variable.

We can also take this one step further by checking to see if props.name is available and displaying some content:

{ props.params.name && 

Hello, {props.params.name}

}

Now, the content will only be shown if there is a name parameter available.

For reference, our code should now look like this.

Step 9. Query String Parameters

You can also pass in query strings as props to any component that will be rendered at a specific route, and access these parameters as props.location.query.

To see how this works, let’s create a new component called Query, and render a property called props.location.query.message:

const Query = (props) => ( 

{props.location.query.message}

)

Now, let’s set up our new Query Route within the address route we already have created:

...   ...

Finally, let’s link to this route by creating a new Link component, and passing in a query string called message and giving it a value. This is done in the ‘to’ property that we have already used.

Instead of passing a link to ‘to’, we instead pass in an object the the pathname and query properties defined:

Route Query

Now, if we click on our Route Query link, we should see our message rendered on the screen:

For reference, our code should now look like this.

Це охоплює багато основних випадків використання для початку роботи з React Router.

Мене звуть Надер Дабіт. Я розробник школи Status, де ми допомагаємо викладачам приймати розумні навчальні рішення, надаючи всі свої дані в одному місці. Перевірте нас @ schoolstatusapp. Якщо вам подобається React and React Native, перегляньте наш подкаст - React Native Radio на Devchat.tv Якщо вам сподобалась ця стаття, будь ласка, порекомендуйте та поділіться нею! Дякую за ваш час