Programador Novato

Programador Novato > [Curso] Reactjs⚛️, así mo más fácil > 06.- Reactjs⚛️ [Routers]

06.- Reactjs⚛️ [Routers]

En este tutorial vamos a trabajar con los routers y no los routers no son esos aparatitos que nos dan las compañias de telefono para proveer internet. Los routers es lo siguiente: imaginemos que tenemos nuestra pagina web y cuando accedemos a una URL en específico nos muestra cierto contenido (de cualquier forma que accedamos a esa url ya sea vía link o escribiendola). También aprenderemos a crear url de error 404. En pocas palabras un router lee la url y dependiendo de la url leída nos manda al contenido que se requiere.

src/index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './router';
render(
    <Router>
        <AppRoutes/>
    </Router>, document.getElementById('root')
);

src/router.js

// Dependencies
import React from 'react';
import { Route, Switch } from 'react-router-dom';

// paginas
import App from './paginas/App';
import Inicio from './paginas/Inicio';
import Contacto from './paginas/Contacto';
import Pag404 from './paginas/Pag404';

const AppRoutes = () =>
  <App>
    <Switch>
      <Route exact path="/" component={Inicio} />
      <Route exact path="/inicio" component={Inicio} />
      <Route exact path="/contacto" component={Contacto} />
      <Route component={Pag404} />
    </Switch>
  </App>;

export default AppRoutes;

src/paginas/App.js

// Dependencies
import React, { Component } from 'react';
import PropTypes from 'prop-types';

// Components
import Contenido from '../paginas/Contenido'
class App extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired
  };

  render() {
    const { children } = this.props;

    return (
      <div className="App">
        <Contenido body={children} />
      </div>
    );
  }
}

export default App;

src/paginas/Contenido.js

// Dependencies
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Contenido extends Component {
  static propTypes = {
    body: PropTypes.object.isRequired
  };

  render() {
    const { body } = this.props;

    return (
      <div className="Contenido">
        {body}
      </div>
    );
  }
}

export default Contenido;

src/paginas/Contacto.js

// Dependencies
import React, { Component } from 'react';

class Contacto extends Component {
  render() {
    return (
      <div className="Contacto">
        <h1>contacto Page</h1>
      </div>
    );
  }
}

export default Contacto;

src/paginas/Inicio.js

// Dependencies
import React, { Component } from 'react';

class Inicio extends Component {
  render() {
    return (
      <div className="Inicio">
        <h1>Inicio Page</h1>
      </div>
    );
  }
}

export default Inicio;

src/paginas/Pag404.js

// Dependencies
import React, { Component } from 'react';

class Pag404 extends Component {
  render() {
    return (
      <div className="Pag404">
        <h1>Pag404 Page</h1>
      </div>
    );
  }
}

export default Pag404;

Programador Novato

06.- Reactjs⚛️ [Routers]

Entradas recientes

Categorías

Contacto

Direccion

E-mail

Whatsapp