06 2Breactjs

06.- Reactjs⚛️ [Routers]

06 2Breactjs

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;

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)