Rutas

"las rutas nos permitirán navegar dentro de nuestra aplicación o entre las paginas de nuestro sitio web." 🚵🏻‍♀️

React Router

React Router es una colección de componentes de navegación que se componen declarativamente con su aplicación. Ya sea que desee tener URLs marcables para su aplicación web o una forma composable de navegar en React Native, React Router funciona donde sea que esté procesando React.

Dentro de nuestro app de shopping necesitamos tener navegación entre las paginas que ya desarrollamos anteriormente, para eso utilizaremos react-router-dom la cual instalamos previamente y debemos configurar nuestra rutas, para eso dentro de nuestro archivo App.jsx agregaremos el siguiente código.

src/App.jsx

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Home from './pages/Home';
import Detail from './pages/Detail';
import Login from './pages/Login';
import Register from './pages/Register';

import './App.css'

const Routes = () => (
  <BrowserRouter>
    <Switch>
      <Route
        path="/"
        exact
        component={Home}
      />
      <Route
        path="/product/:id"
        exact
        component={Detail}
      />
      <Route
        path="/login"
        exact
        component={Login}
      />
      <Route
        path="/register"
        exact
        component={Register}
      />
    </Switch>
  </BrowserRouter>
);

export default Routes;