06 Vista de un board

Agregamos el componente Board

Agregamos el componente Board mediante la creación del archivo src/components/Board.js. El contenido del archivo debería ser el siguiente:

import React, { Component } from 'react';

class Board extends Component {
  render() {
    return (
      <div className="Board">
        <div className="Board-content">
          <div className="Board-header">
            <span className="Board-header-btn">
              BoardId: {this.props.match.params.boardId}
            </span>
          </div>
        </div>
      </div>
    );
  }
}

export default Board;

Linkeamos el componente Board

Tenemos el nuevo componente Board. Ahora definiremos una ruta para renderizarlo.

Editamos el archivo src/App.js de la siguiente manera:

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

Y agregamos la ruta al componente:

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}/>
+         <Route path='/boards/:boardId' component={Board}/>
        </div>
      </div>
    </BrowserRouter>
  );
}

Luego, debemos agregar en el componente BoardTile (src/components/BoardTile.js) el módulo Link de react-router-dom, para habilitar la navegación desde el mismo hacia un board:

  import React, { Component } from 'react';
+ import { Link } from 'react-router-dom';

Para finalizar, linkeamos hacia la vista del board:

render() {
  return (
    <li className="BoardTile">
-      <a className="BoardTile-link">
+      <Link className="BoardTile-link" to={`/boards/${this.props.id}`}>
         <span className="BoardTile-fade"></span>
         <span className="BoardTile-details">
           <span className="BoardTile-details-name">
             {this.props.name}
           </span>
         </span>
-      </a>
+      </Link>
     </li>
   );
 }

Si ahora visitamos nuestra aplicación, e intentamos visitar un board en particular (haciendo click sobre él), el resultado debería ser el siguiente:

Ahí se debería observar BoardId: seguido del id de dicho board

Commit en git

git add -A
git commit -m "Vista de un board"

---

Siguiente: 7. Componentizar las listas

# Agregar el remote si no se hizo antes
git remote add origin https://github.com/wyeworks/react-workshop-2018.git
git fetch origin
# Fin paso opcional

git reset --hard f83c9f0