Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

React Router

React Router 4

react-router, react-router-dom

For webbrowser based project, use react-router-dom - DOM bindings for React Router.

react-router-dom


// using ES6 modules
import { BrowserRouter, Route, Link } from 'react-router-dom'

// using CommonJS modules
var BrowserRouter = require('react-router-dom').BrowserRouter
var Route = require('react-router-dom').Route
var Link = require('react-router-dom').Link
Routes

In a main component:


render () {
  return (
    <Switch>
      <Route exact path='/landing' component={Landing}/>
      <Dashboard>
        <Route path='/dashboard' component={Main}/>
        <Route path='/users' component={Users}/>
      </Dashboard>
      <Route exact path='/' component={Login}/>
    </Switch>
  )
}
Links

Add to a component:


render () {
  return (
    ...
    <Link to='/main'><Logo /></Link>
    ...
  )
}
Redirecting

Add to a component:


render () {
  return (
    ...
    {this.state.login && <Redirect to='/download' />}
    ...
  )
}

react-router

react-router-redux