Router

Roter w React przypomina system zakładek (pads). Może zawierać wewnątrz linki (Link) do wybrania śieżki. Drugim elementem są znaczniki Route wiążce te ścieżki z komponentami. Kilkając w link powodujemy wyświetlenie odpowiedniego komponentu.

Konfiguracja

Instalujemy pakiet routera:

yarn add react-router-dom

Przykład

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

let  M1 = (props) => (<div> Moduł 1</div>);
let  M2 = (props) => (<div> Moduł 2</div>);


class App extends Component {
render() {
return (
<Router>
<div>
<Link  to='/'>Zakładka 1</Link>&nbsp;&nbsp;
<Link to='/2'>Zakładka 2</Link>
<div className="container">
<Route exact path="/" component={M1} />
<Route path="/2" component={M2} />
</div>
</div>
</Router>
);
}
}

Wywołanie http://localhost:3000/ otworzy moduł M1 a http://localhost:3000/2 - moduł M2.

Należy zwrócić uwagę na parametr exact wymuszający dokładne porównanie ścieżek. Gdyby go zabrakło - wówczas /m2 byłoby spełnione także dla / (zgadza się początek). Moduł m2 by się nie wyświetlił.

Parametry

Jak uzyskać dostęp do parametrów przekazywanych w adresie URL? Możliwe jest ich zdefiniowanie w ścieżce:

 <Route path="/m3/:id" component={M3} />

Dostęp do parametr uzyskamy w module m3 poprzez własnosci: this.props.match.params(dla powyższego parametru o identyfikatorze id będzie to this.props.match.params.id).

Zobacz przykład [032]

Statyczna i dynamiczna nawigacja

Prócz komponentu Router mamy dostępny komponent StaticRouter, który tym się różni od Router, że uniemożliwia przekierowanie (zmianę URL). Może to być przydatne, gdy renderowanie odbywa się po stronie serwera, a zmiana URL wiąże się z przeładowaniem całej strony.

Zobacz: https://reacttraining.com/react-router/web/api/StaticRouter

Render zamiast komponentu

W powyższych przykładach zakładamy, że routing polega na wyborze komponentu. Nie jest to jednak jedyna możliwość. Można wykorzystać własność render (zamiast component) do wyboru funkcji renderowania (szczegóły: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md\:

  <Route path="/" render={
    props => {
      return ( // renderowanie dla danej ścieżki
      )
    }
    } />

Zobacz też: