05 Navegación

Hasta este punto, toda la funcionalidad de nuestra aplicación se encuentra en una misma ruta, /. Dado que en los siguientes pasos del workshop estaremos agregando nuevas funcionalidades que van a requerir navegar hacia otras rutas, es conveniente agregar un router a nuestra aplicación que nos permita manejar esto.

Instalamos react router dom

yarn add --dev react-router-dom

Agregamos el router al componente principal

Editamos src/App.js, importando los módulos del router que precisaremos de aquí en más:

  import React, { Component } from 'react';
  import Boards from './components/Boards';
+ import { BrowserRouter, Route, Link } from 'react-router-dom';

Agregamos el componente BrowserRouter:

+ <BrowserRouter>
    <div className="App-container">
      <div className="App-header">
        <a className="App-header-logo">
          <span className="App-header-logo-default"></span>
        </a>
      </div>
      <div className="App-content">
        <Boards/>
      </div>
    </div>
+ </BrowserRouter>

Agregamos la ruta principal para renderizar el componente Boards:

<BrowserRouter>
  <div className="App-container">
    <div className="App-header">
      <a className="App-header-logo">
        <span className="App-header-logo-default"></span>
      </a>
    </div>
    <div className="App-content">
+      <Route exact path='/' component={Boards}/>
-      <Boards/>
    </div>
  </div>
</BrowserRouter>

Utilizamos el componente Link:

- <a className="App-header-logo">
+ <Link className="App-header-logo" to="/">
    <span className="App-header-logo-default"></span>
- </a>
+ </Link>

** OBS: src/App.js debería verse finalmente así:

import React, { Component } from 'react';
import Boards from './components/Boards';
import { BrowserRouter, Route, Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App-container">
          <div className="App-header">
            <Link className="App-header-logo" to="/">
              <span className="App-header-logo-default"></span>
            </Link>
          </div>
          <div className="App-content">
            <Route exact path='/' component={Boards}/>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Commit en git

git add -A
git commit -m "Navegacion"

---

Siguiente: 6. Vista de un Board