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;

Una respuesta a “06.- Reactjs⚛️ [Routers]”

  1. Alan dice:

    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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *