React RouterAan de slag met React Router


Opmerkingen

React Router is een populaire en complete routeringsbibliotheek voor React.js die de gebruikersinterface synchroon houdt met de URL. Het ondersteunt het lui laden van codes, dynamische routekoppeling en het afhandelen van locatietransitie, en werd aanvankelijk geïnspireerd door de router van Ember.

TODO: in dit gedeelte moeten ook grote onderwerpen binnen react-router worden vermeld en links naar de gerelateerde onderwerpen. Aangezien de documentatie voor react-router nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Versie Publicatiedatum
1.0.0 2015/11/09
1.0.1 2015/12/05
1.0.2 2015/12/08
1.0.3 2015/12/23
2.0.0 2016/02/10
2.0.1 2016/03/09
2.1.0 2016/04/11
2.1.1 2016/04/11
2.2.0 2016/04/13
2.2.1 2016/04/14
2.2.2 2016/04/14
2.2.3 2016/04/15
2.2.4 2016/04/15
2.3.0 2016/04/18
2.4.0 2016/04/28
2.4.1 2016/05/19
2.5.0 2016/06/22
2.5.1 2016/06/23
2.5.2 2016/07/01
2.6.0 2016/07/18
2.6.1 2016/07/29
2.7.0 2016/08/20
2.8.0 2016/09/09
2.8.1 2016/09/13
3.0.0 2016/10/24
3.0.1 2017/01/12
3.0.2 2017/01/18
3.0.3 2017/03/28
3.0.4 2017/04/09
3.0.5 2017/04/10
4.0.0 2017/04/12
4.1.0 2017/04/12
4.1.1 2017/04/12

Ermee beginnen

Dit aan de slag gaat ervan uit dat je werkt met create-react-app , of iets dergelijks met Babel en al het lekkers dat er is.

Bekijk ook de geweldige documentatie hier .

Installeer eerst react-router-dom:

npm install react-router-dom of yarn add react-router-dom .

Maak vervolgens een component die bestaat uit een basisnavigatiebalk met twee items en basispagina's:

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'

const Home = () => (
  <div>
    <p>We are now on the HOME page</p>
  </div>
)

const About = () => (
  <div>
    <p>We are now on the ABOUT page</p>
  </div>
)

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <hr/>
      <Route path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </BrowserRouter>
)
export default App
 

Laten we stap voor stap door deze code gaan:

  • import React from 'react' : zorg ervoor dat u React importeert
  • import { BrowserRouter as Router, Route, Link } from 'react-router-dom' opgesplitst:
  • BrowserRouter is de eigenlijke router zelf. Zorg ervoor dat uw component in de component BrowserRouter .
  • Route is een bepaalde route waarnaar kan worden genavigeerd
  • Link is een component die een <a href="..."> tag produceert, die u als hyperlink kunt gebruiken.

  • const Home is een functie die terugkeert naar de startpagina.
  • const About is een functie die de About-pagina teruggeeft.

  • const App is het hoofdbestanddeel:

  • <BrowserRouter> is de JSX- component die de componenten verpakt waarin u de component <Route> wilt gebruiken.

  • ' is a single element to wrap all JSX inside the BrowserRouter in is a single element to wrap all JSX inside the .

  • <ul> is de navigatiebalk. Het bevat een link naar Home en een link naar About.

  • <li><Link to="/">Home</Link></li> links naar de startpagina. U kunt zien dat, aangezien de link naar "/" verwijst, een leeg relatief pad de startpagina weergeeft.

  • <li><Link to="/about">About</Link></li> links naar de About-pagina.

  • <Route path="/" component={Home}/> beschrijft welke component moet worden weergegeven als het relatieve pad "/" .

  • <Route path="/about" component={About}/> beschrijft welk component moet worden weergegeven als het relatieve pad "/about" .

Hier valt veel te leren, maar hopelijk verklaart dit de basisprincipes, dus vanaf hier kunt u doorgaan met leren.

Hallo wereld met React en React Router

Nadat je react en react-router hebt geïnstalleerd, is het tijd om ze samen te gebruiken.

De syntaxis is heel eenvoudig, u geeft de url en de component u wilt weergeven wanneer die url wordt geopend

<Route path="hello" component={ HelloComponent } />

Dit betekent dat wanneer het URL-pad hello , de component HelloComponent


FILENAME: app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory, Link } from 'react-router';

// These are just demo components which render different text.

let DashboardPage = () => (
  <div>
    <h1>Welcome User</h1>
    <p>This is your dashboard and I am an example of a stateless functional component.</p>
    <Link to="/settings">Goto Settings Page</Link>
  </div>
)

let SettingsPage = () => (
  <div>
    <h1>Manage your settings</h1>
    <p>display the settings form fields here...or whatever you want</p>
    <Link to="/">Back to Dashboard Page</Link>
  </div>
)

let AuthLoginPage = () => (
  <div>
    <h1>Login Now</h1>
    <div>
      <form action="">
        <input type="text" name="email" placeholder="email address" />
        <input type="password" name="password" placeholder="password" />
        <button type="submit">Login</button>
      </form>
    </div>
  </div>
)

let AuthLogoutPage = () => (
  <div>
    <h1>You have been successfully logged out.</h1>
    <div style={{ marginTop: 30 }}>
      <Link to="/auth/login">Back to login page</Link>
    </div>
  </div>
)

let ArticlePage = ({ params }) => (
  <h3>Article {params.id}</h3>
)

let PageNotFound = () => (
  <div>
    <h1>The page you're looking for doesn't exist.</h1>
  </div>
)

// Here we pass Router to the render function.
render( (
    <Router history={ browserHistory }>

      <Route path="/" component={ DashboardPage } />
      <Route path="settings" component={ SettingsPage } />

      <Route path="auth">
        <IndexRoute component={ AuthLoginPage } />
        <Route path="login" component={ AuthLoginPage } />
        <Route path="logout" component={ AuthLogoutPage } />
      </Route>
    
      <Route path="articles/:id" component={ ArticlePage } />

      <Route path="*" component={ PageNotFound } />

    </Router>
  ), document.body );
 

Routeparameters : het routerpad kan worden geconfigureerd om parameters op te nemen, zodat we de parameterwaarde van het onderdeel kunnen lezen. Het pad in de <Route path="articles/:id" component={ ArticlePage } /> heeft een /:id . Deze id variabele dient het doel van ArticlePage en is toegankelijk via de component ArticlePage met behulp van {props.params.id} .

Als we http://localhost:3000/#/articles/123 {props.params.id} http://localhost:3000/#/articles/123 wordt {props.params.id} bij component ArticlePage opgelost in 123. Maar een bezoek aan URL http://localhost:3000/#/articles ArticlePage zal niet werk omdat er geen parameter id is.

De routeparameter kan optioneel worden gemaakt door deze tussen een paar haakjes te schrijven:
<Route path="articles(/:id)" component={ ArticlePage } />

Als u wilt sub routes te gebruiken, dan kunt u doen

<Route path="path" component={ PathComponent }>
  <Route path="subpath" component={ SubPathComponent } />
</Route>
 
  • wanneer /path wordt geopend, wordt PathComponent weergegeven
  • wanneer toegang wordt verkregen tot /path/subpath PathComponent , wordt PathComponent weergegeven en wordt SubPathComponent als props.children

U kunt path="*" gebruiken om alle routes te vangen die niet bestaan en 404 page not found pagina weer te geven.

Installatie en instellingen

Voer de opdracht npm uit om React Router te installeren

npm install --save react-router

En je bent klaar. Dit is letterlijk alles wat u hoeft te doen om de reactrouter te installeren.

Let op: react-router is afhankelijk van react , dus zorg ervoor dat je react ook installeert.

Opzetten:

met behulp van een ES6-transpiler, zoals babel

import { Router, Route, Link } from 'react-router'
 

geen ES6-transpiler gebruiken

var Router = require('react-router').Router
var Route = require('react-router').Route
var Link = require('react-router').Link
 

Installatie met UMD build

Een build is ook beschikbaar op npmcdn . U kunt het script als volgt opnemen:

<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
 

De bibliotheek is wereldwijd beschikbaar via window.ReactRouter .