Ръководство за начинаещи за 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. Първо създайте папка и cd в нея. След това стартирайте npm init -y:

npm init -y
  • - просто отговаряте с да на всички въпроси

След това инсталирайте response, response-router и response-dom и ги запазете като зависимости:

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

След това инсталирайте нашите dev зависимости. Това ще бъдат 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.

Сега, когато webpack и babel са настроени. Нека създадем пряк път за webpack-dev-server. Отворете package.json и вмъкнете следния скрипт в ключа „скриптове“:

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

Сега можем просто да стартираме npm start, за да стартираме нашия проект.

Нека сега настроим нашия HTML и React. Отворете index.html и създайте основна html страница. След това добавете div с идентификатора на root и скрипт тагове, отнасящ се до 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

Все още не използваме Компонент или който и да е от компонентите на рутера / реагиращия рутер, но ги въвеждаме, за да можем да започнем във втора стъпка.

Сега, ако стартирате проекта и отидете до // 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.

Ще забележите, че след хеш в адресната лента има произволни низове:

Когато използвате хеш история, ще видите допълнителен елемент в низа на вашата заявка, който изглежда нещо като _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. Бутонът ще бъде активен, ако текущият маршрут е или свързаният маршрут, или който и да е потомък на съответния маршрут. За да може връзката да е активна само по точно свързания маршрут, използвайте вместо това или задайте theonlyA 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.

За да приложите това, първо внесете от рутера за реакция:

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.

Казвам се Nader Dabit. Аз съм разработчик на School Status, където помагаме на преподавателите да вземат интелигентни решения за обучение, като предоставяме всичките им данни на едно място. Вижте ни @ schoolstatusapp. Ако харесвате React и React Native, разгледайте нашия подкаст - React Native Radio на Devchat.tv Ако ви хареса тази статия, моля, препоръчайте и я споделете! Благодаря за отделеното време