React Router

V3

API-Reference

https://github.com/reactjs/react-router/blob/master/docs/API.md

Themen

• Route und IndexRoute
• history
• Nested routes und das children-Property
• Links
• location und param Property und componentWillReceiveProps

Router, Route, IndexRoute, Redirect

import { Router, Route, Redirect, IndexRoute, hashHistory }
    from 'react-router';

const routes = <Router history={hashHistory}>
  <Redirect from="/vote" to="/votes"/>
  <Route path="/" component={Layout}>
    <IndexRoute component={VotePage}/>
    <Route path="votes/:id" component={SingleVotePage}/>
    <Route path="login(/:redirect)" component={LoginPage}/>
    <Route path="compose" component={VoteComposerPage} onEnter={requireAuth}/>
    <Route path="*" component={NoMatchPage}/>
  </Route>
</Router>;

Router

• Echte React-Komponente
• Top-Level-Komponente, entscheidet anhand der history, was dargestellt wird
• hat Routen als Kinder

const routes = <Router history={hashHistory}>
...
</Router>;

History

• kommt aus dem history-Projekt
• Abstraktion der History des Browsers
• kann zur Navigation genutzt werden
• liefert aktuelle URL mundgerecht an den Router
• hashHistory codiert Pfad in angehängten Hash (#/vote)
• browserHistory codiert Pfad direkt in URL (/vote)

// Push a new entry onto the history stack.
history.push('/home')

// Replace the current entry on the history stack.
history.replace('/profile')

Route

• Konfigurations-Komponente
• welche Komponente soll bei welcher URL darstellt werden
• können verschachtelt werden (nested)
• Matching der URL mit Konfiguration ergibt einen Pfad
• Alle Komponenten des Pfads werden dargestellt

// plain match (containing nested routes)
<Route path="/" component={Layout}>
    // id is passed as parameter to component
    <Route path="votes/:id" component={SingleVotePage}/> /
    // redirect is optional
    <Route path="login(/:redirect)" component={LoginPage}/>
    // onEnter and onExit possible as hooks
    <Route path="compose" component={VoteComposerPage}
        onEnter={requireAuth}/>
    // wildcard
    <Route path="*" component={NoMatchPage}/>
</Route>

IndexRoute und Redirect

  // /vote redirects to /votes
<Redirect from="/vote" to="/votes"/>
<Route path="/" component={Layout}>
  // will be rendered additionally when path is just /
  <IndexRoute component={VotePage}/>
  // ...
</Route>

Nested Routes und children

• Router rendert den gematchten Komponenten-Pfad als seine Unterkomponenten
• Unterkomponenten werden als children in den props übergeben
• children kann grundsätzlich eine oder mehrere Komponenten sein
• beim Router ist es immer nur eine Komponente

export default function Layout(props) {
    return 

        
Greetings
        {props.children}
    
;
}

Link

• Echte React-Komponente
• Ein Link auf eine Route
• wird als a-Element gerendert
• hat zudem einen Click-Handler, der den Default verhindert und das history-Objekt updated
• weiß, ob die Route auf die sie verweist, aktiv ist

<Link to={`/votes/${vote.id}`} activeClassName='active'>
  
{vote.title}
</Link>

Datenübergabe an Routen

Der Router übergibt den zu rendernden Routen Daten als Properties

• Property location: enthält pathname und query
• Property params: die dynamischen Segmente der Route (z.B. id)
• Lifecycle-Methode componentWillReceiveProps: wird mit neuen Properties aufgerufen, wenn sich die Route geändert hat