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;

Eugenio Chaparro

Ver comentarios

  • Hola. Estoy tratando de usar el package 'tuber' de R para conectarme a la API de YouTube Data v3.
    Tengo problemas pues me pide que relacione mi cuenta con un sitio web con aviso de privacidad y demás restricciones. Tu has tenido algún problema similar? Me urge saber. Te dejo mi whatsapp 8113210592.
    Alan

  • Muchas gracias. ?Como puedo iniciar sesion?

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

[Seleccionar ganador] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Seleccionar ganador] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial detectaremos cuando se hayan terminado las canicas y mostraremos un ganador. Creamos…

4 semanas hace
[Colocar Marcador] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Colocar Marcador] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial vamos extraer todos los goles de los jugadores y los vamos a…

4 semanas hace