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;
