React router

Nos permite cargar unos componentes u otros en función de la url.

npm i react-router
npm i react-router-dom

Documentación de react-router

Configuración básica

src/App.jsimport React from 'react';
import Routes from './application/routes';

const App = () => <Routes />;;

export default App;
src/application/routes.jsimport React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from '../pages/home'
import Contacto from '../pages/contacto'
import Producto from '../pages/producto'

const Routes = () => (
    <BrowserRouter>
        <Switch>
            { /*El atributo exact significa que ese nodo no afecta a sus descendientes.
             Si no lo ponemos, al escribir /login, accederíamos igualmente a Home */}    
            <Route exact path="/" component={Home} />
            <Route path="/contacto" component={Contacto} />
            <Route path="/producto/:id" component={Producto} />
             { /* Es muy recomendable añadir esta ruta para obtener un mensaje de error en el caso de que la 
            ruta no exista. De lo contrario, si la ruta no existe llegaremos a una página en blanco */}    
            <Route path="*" component={() => <div>404</div> } />
        </Switch>
    </BrowserRouter>
);

export default Routes;
src/pages/home/home.jsimport React from 'react';
import { NavLink } from 'react-router-dom';

const Home = _ => 
    <ul>
        <li><NavLink to={`/`}>Inicio</NavLink></li>
        <li><NavLink to={`/contacto`}>Contacto</NavLink></li>
        <li><NavLink to={`/producto/1`}>Producto 1</NavLink></li>
        <li><NavLink to={`/ajksdfkjhasdk`}>Error en la url</NavLink></li>
    </ul>

export default Home;
Descargar ejemplo router app

Redirección desde React

Definimos el método que ejecutará la redirección:

redirectToHome() {
        const { location, history } = this.props;
        history.replace(...location, '/');
    }
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.