Inicio.

• Create React App se ejecutra del lado del cliente.
• Create React App no tiene router x default.
• No es posible de forma nativa asignar una pagina a un path (/ - /about - /electronica/4)
  • Create React App siempre muestra/sirve el archivo index.html en public/index.html

React Router Dom

• Para gestionar diferentes rutas se usa la libreria react router dom.
  • https://reactrouter.com/en/main
  • npm install react-router-dom - yarn add react-router-dom
• React router usa un contexto.
  • https://es.reactjs.org/docs/context.html
  • Un contexto es la forma nativa que ofrece React para que cualquier componente dentro del contexto pueda acceder a un grupo de propieades.
    • Evita el prop drilling
    • Permite centralizar logica reutiliable.

Como implementar react-router-dom

• index.js

  • Importamos el BrowserRoute

  import { BrowserRouter } from "react-router-dom";
  

  • Lo agregamos a la Raiz del proyecto.

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <React.StrictMode>
      {/* Se usa en forma de wrapper para que todos los componentes hijos tengan
      acceso a las rutas */}
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  );
  

  • Esta la forma de agregar un contexto a toda la app.

• App.js

  • Retiramos las etiqueras body de App.js (ya esta la etiquete en index.html)
  • Importamos { Routes , Route } from ‘react-router-doc’
  • Copiamos el contenido

  <ItemListContainer>
            <header>
              <span>Bulonera Jeanneret</span>
            </header>
            <main>
              <span>Desde hace mas 50 años proveyendo a la industria</span>
              <span>con la mayor variedad y el mejor precio</span>
              <img src={Fondo} alt="imagen de bulones"></img>
              <span>Si existe y no lo tenemos lo conseguimos. Consúltenos</span>
            </main>
            <Footer />
        </ItemListContainer>
  

  • Borramos el contenido copiado.
  • Pegamos el contenido debajo del componente.
  • Seleccionamos el contenido pegado y lo comentamos manteniendo paretado ctrl+k y depsues c
  • Importamos los componentes necesarios de la librearia react-router-don

  import { Routes, Route } from "react-router-dom";
  

  • Agregamos debajo de Navbar el componente Routes

  <div
        className="App"
        style={{ backgroundColor: "grey", minHeight: "100vh" }}
      >
        <NavBar />
        <Routes>
          
        </Routes>
        </ItemListContainer>
      </div>
  

  • Dentro de Routes agregamos el componente Route

  <div
        className="App"
        style={{ backgroundColor: "grey", minHeight: "100vh" }}
      >
        <NavBar />
        <Routes>
  	        <Route />
        </Routes>
        </ItemListContainer>
      </div>
  

  • El componente Route requiere dos propieades
    • path (string) = que indica el path de la ruta a la que hace referencia.
      • Ejemplo - path=’/’
      • Ejemplo - path=’/about’
    • element = que indica el componente que se debe mostrar en esa ruta.
      • Ejemplo - element={<HomePage />}
      • Ejemplo - element={<AboutPage />}

• Carpeta pages

  • Crear la carpeta pages dentro de src
  • Crear dos componentes.
    • HomePage.js
    • AboutPage.js
  • En ambos componentes usar el snippet rafce o agregar este codigo en la pagina que corresponda

  // HomePage.js
  import React from 'react'
  
  const HomePage = () => {
    return (
        <div>Home page works!!</div>
    )
  }
  
  export default HomePage 
  

  // AboutPage.js
  import React from 'react'
  
  const AboutPage= () => {
    return (
      <div>About page works!!</div>
    )
  }
  
  export default AboutPage
  

• App.js

  • En el componente Route agregar los siguentes path y element

  import "bootstrap/dist/css/bootstrap.css";
  import "./App.css";
  import NavBar from "./components/NavBar/NavBar";
  import ItemListContainer from "./components/ItemListContainer/ItemListContainer";
  import Fondo from "./img/fotoFondo.jpg";
  import Footer from "./components/Footer/Footer";
  import { Routes, Route } from "react-router-dom";
  import HomePage from "./pages/HomePage";
  import AboutPage from "./pages/AboutPage";
  
  function App() {
    return (
      <div
        className="App"
        style={{ backgroundColor: "grey", minHeight: "100vh" }}
      >
        <NavBar />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    );
  }
  
  export default App;
  

• Navegador

  • Si no hay errores en la terminal, en el navegador ingresar http://localhost:{PORT}/
    • El usuario debe ver la pagina con el mensaje Home page works!!
  • Ingresar a la url http://localhost:{PORT}/about
    • El usuario debe ver la pagina con el mensaje About page works!!