Begyndervejledning til reaktion på router

Eller hvad jeg ville ønske jeg vidste, da jeg startede med React Router.

Klik her for at gå til Github repo Denne vejledning bruger React Router version 2.0.1 og Babel version 6.7.4

React Router er standard routing-biblioteket til React. Fra dokumenterne:

“React Router holder din brugergrænseflade synkroniseret med URL'en. Den har en simpel API med kraftfulde funktioner som indlæsning af doven kode, dynamisk rutematchning og placering af overgangshåndtering indbygget. Gør URL'en til din første tanke, ikke en eftertanke.

Trin 1. Kom godt i gang

For at komme i gang kan du enten klone startrepanoen og springe til trin to eller følge de næste trin og opsætte dit projekt manuelt.

Manuel opsætning

Lad os først oprette vores miljø med React, Babel og webpack. Opret først en mappe og cd ind i den. Kør derefter npm init -y:

npm init -y
  • -y svarer bare ja på alle spørgsmålene

Dernæst skal du installere react, react-router og react-dom og gemme dem som afhængigheder:

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

Installer derefter vores dev-afhængigheder. Disse vil være webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 og babel-preset-react

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

Lad os nu oprette konfigurationsfilerne til webpack og babel:

touch .babelrc webpack.config.js

Lad os derefter oprette en mappe til vores kode. Vi kalder denne mappe-app:

mkdir app

Opret tre filer i app-biblioteket: index.html app.js main.js

cd apptouch index.html app.js main.js

Vores filstruktur skal nu se sådan ud:

Åbn nu .babelrc-filen og tilføj forudindstillingerne til react og ES2015:

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

I webpack.config.js skal du tilføje følgende konfiguration for at komme os i gang:

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' } ] }}
Hvis du gerne vil lære mere om webpack og babel, skal du tjekke min vejledning om begyndende webpack.

Nu er webpack og babel oprettet. Lad os oprette en genvej til webpack-dev-server. Åbn package.json og indsæt følgende script i "scripts" -tasten:

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

Nu kan vi bare køre npm start for at starte vores projekt.

Lad os nu oprette vores HTML og reagere. Åbn index.html, og opret en base-html-side. Tilføj derefter en div med rod-id'et og et script-tag, der henviser til bundle.js:

    React Router 

Lad os nu gå ind på vores main.js og oprette et startpunkt for vores app. Skriv dette i din main.js-fil:

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

Lad os nu gå ind i app.js og oprette vores appkomponent. Åbn app.js og skriv følgende:

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

Hello World!

export default App

Vi bruger ikke komponent eller nogen af ​​router- / reaktor-router-komponenterne endnu, men vi bringer dem ind, så vi kan komme i gang i trin to.

Nu, hvis du kører projektet og navigerer til // localhost: 8100 / skal du få 'Hello World !!!!!!' på din skærm:

npm start

Trin 2. Grundlæggende routing

Lad os oprette en grundlæggende rute. Vi erstatter App-komponenten med en React-klasse, som returnerer en routerkomponent. Router indpakker alle de ruter, vi skal definere.

Hver rute identificeres i en komponent. Komponenten har to egenskaber: sti og komponent. Når en sti matcher stien, der er givet til komponenten, returnerer den den angivne komponent.

I app.js refaktorerer du app-komponenten, så den ser sådan ud:

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

Nu, hvis du navigerer til // localhost: 8100 / skal du se vores hjemmekomponent, og hvis du navigerer til // localhost: 8100 / # / adresse, skal du se vores adressekomponent.

Du vil bemærke, at der er tilfældige strenge efter hashen i din adresselinje:

Når du bruger hashhistorik, vil du se et ekstra element i din forespørgselsstreng, der ligner _k = 123abc. Dette er en nøgle, som historikken bruger til at slå op på vedvarende tilstandsdata i window.sessionStorage mellem sideindlæsninger. Læs mere her.

Hvis du vil have en renere adresse, eller hvis du bruger denne i produktionen, kan du undersøge browserHistory vs hashHistory. Når du bruger browserHistory, skal du have en server, der altid returnerer din server på en hvilken som helst rute, for eksempel hvis du bruger nodejs, vil en konfiguration som følgende (fra docs) fungere:

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)

For at lære mere om browserHistory, tjek dette link.

I resten af ​​denne vejledning bruger vi hashHistory.

Trin 3. 404 rute

Hvad sker der nu, hvis vi rammer en rute, der ikke er defineret? Lad os oprette en 404-rute og en komponent, der vender tilbage, hvis ruten ikke findes:

const NotFound = () => ( 

404.. This page is not found!

)

Nu skal du oprette følgende rute under vores '/ adresse'-rute:

Nu, hvis vi navigerer til en rute, der ikke er defineret (// localhost: 8100 / # / asdfasdf), skal vi se vores 404-rute.

Trin 4. IndexRoute og Links

Lad os nu tilføje navigation for at få os mellem sider.

For at gøre dette bruger vi komponenten. svarer til at bruge et html-ankertag.

Fra dokumenterne:

Den primære måde at give brugerne mulighed for at navigere rundt i din applikation. gengiver et fuldt tilgængeligt ankermærke med det rette href.

For at gøre dette skal vi først oprette en Nav-komponent. Vores Nav-komponent indeholder komponenter og vil se sådan ud:

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.

Step 6. activeStyle / activeClassName and IndexLink

Vi vil nu se på, hvordan man styler til et link baseret på, om ruten er aktiv. Der er to hovedmåder at gøre dette, enten tilføje stil direkte eller gennem en klasse.

Fra dokumenterne:

kan vide, hvornår ruten, det linker til, er aktiv og automatisk anvende en activeClassName og / eller activeStyle, når den får en prop. Den vil være aktiv, hvis den aktuelle rute enten er den sammenkædede rute eller en efterkommer af den valgte rute. For at få linket kun til at være aktiv på den nøjagtige linkede rute, skal du i stedet bruge eller indstille kunA ctiveOnIndex prop.

Lad os først se på activeStyle. For at anvende activeStyle skal du blot tilføje activeStyle som en egenskab til a og videregive den styling, du gerne vil have:

Home

Lad os opdatere vores Nav-komponent for at implementere dette:

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

Lad os nu se på, hvordan dette ser ud i vores browser. Du bemærker muligvis, at når du klikker på adresse, er hjemmet stadig fremhævet:

Dette skyldes, at når det bruges sammen med activeStyle, vil det være aktivt, hvis den aktuelle rute enten er den blækkede rute eller en hvilken som helst efterkommer af ruten med blækket.

Dette betyder, at fordi adressen er en efterkommer af hjemmet, forbliver den fremhævet. For at løse dette kan vi overføre den enesteActiveOnIndex-egenskab til vores Link-komponent:

Home

Når vi ser på vores browser, vil linket kun blive fremhævet, hvis vi er på det nøjagtige link:

Der er også en søskendel af kaldet. det er kun aktivt, når den aktuelle rute er nøjagtigt den sammenkædede rute.

Fra dokumenterne:

En er som en, bortset fra at den kun er aktiv, når den aktuelle rute er nøjagtigt den linkede rute. Det svarer til det eneste sæt ActiveAnOnIndex.

For at gennemføre dette skal du først hente ind fra react-router:

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

Nu skal du blot udskifte komponenterne i nav med komponenter:

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

Hvad med at tilføje klasser vs stilarter? For at gøre dette kan vi bruge activeClassName. Lad os oprette en aktiv stil i vores index.html:

 .active { color:#53acff }

Nu erstatter vi activeStyle med activeClassName i vores Nav-komponent:

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

Som reference skal vores kode nu se sådan ud.

Trin 7. Navngivne komponenter

Ved hjælp af navngivne komponenter kan vi specificere komponenten som rekvisitter til en.

Fra dokumenterne:

Når en rute har en eller flere navngivne komponenter, er de underordnede elementer tilgængelige ved navn på dette. Forslag. I dette tilfælde vil this.props.children være udefineret. Alle rutekomponenter kan deltage i indlejringen.

Lad os nu grave ind i koden og se, hvordan dette rent faktisk ville se ud.

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.

Det dækker mange grundlæggende brugssager til at komme i gang med React Router.

Mit navn er Nader Dabit. Jeg er udvikler på skolestatus, hvor vi hjælper undervisere med at tage smarte instruktionsbeslutninger ved at levere alle deres data ét sted. Tjek os på @ schoolstatusapp. Hvis du kan lide React and React Native, skal du tjekke vores podcast - React Native Radio på Devchat.tv Hvis du kunne lide denne artikel, kan du anbefale og dele den! Tak for din tid