Clonación de React Router en Componentes React

Lo logré! Creé mi propio Router, con link y la posibilidad de usar HashRouter.
Al momento de comentar, no hay ninguna solución en los comentarios. Los invito a que prueben el reto! Y si ya lo hicieron, a que lo compartan.
Fue un muy buen reto. Casi me rindo muchas veces, pero finalmente lo terminé. Dejo mi solución.

Router.jsx

import { useState } from 'react'
import { PathContext } from './Context'

export function Router({ children }) {
    const [currentPath, setCurrentPath] = useState(window.location.pathname)
    const routes = []

    const navigate = to => {
        window.history.pushState({}, '', to)
        setCurrentPath(to)
    }

    return (
        <PathContext.Provider
            value={{ currentPath, setCurrentPath, routes, navigate }}
        >
            {children}
        </PathContext.Provider>
    )
}

Route.jsx

import { useContext } from 'react'
import { PathContext } from './Context'

export function Route({ path, element }) {
    const { currentPath, routes } = useContext(PathContext)

    //Push all routes except '*' (not found) to routes[]
    const routeInRoutes = routes.includes(path)
    if (!routeInRoutes && path != '*') routes.push(path)

    //returning in match
    if (currentPath == path) return element

    // Not found case
    const currentPathInRoutes = routes.includes(currentPath)
    if (path == '*' && !currentPathInRoutes) return element
}

Link.jsx

import { useContext } from 'react'
import { PathContext } from './Context'

const styles = {
    textDecoration: 'underline',
    color: 'blue',
    cursor: 'pointer',
}

export function Link({ to, children }) {
    const { navigate } = useContext(PathContext)

    return (
        <a style={styles} onClick={() => navigate(to)}>
            {children}
        </a>
    )
}

HashRouter.jsx

import { useState } from 'react'
import { PathContext } from './Context'

export function HashRouter({ children }) {
    const windowPath = window.location.pathname.replace(/^\/#/, '')
    const [currentPath, setCurrentPath] = useState(windowPath)
    const routes = []

    const navigate = to => {
        window.history.pushState({}, '', `/#${to}`)
        setCurrentPath(to)
    }

    return (
        <PathContext.Provider
            value={{ currentPath, setCurrentPath, routes, navigate }}
        >
            {children}
        </PathContext.Provider>
    )
}

Context.jsx

import { createContext } from 'react'

export const PathContext = createContext()

App.jsx

import { Link } from '../router/Link'
import { Route } from '../router/Route'
import { Router } from '../router/Router'

export function App() {
    return (
        <Router>
            <Route element={<HomePage />} path="/" />
            <Route element={<BlogPage />} path="/blog" />
            <Route element={<NotFound />} path="*" />
        </Router>
    )
}

function HomePage() {
    return (
        <>
            <h1>You are in the home</h1>
            <Link to="/blog">Go to blog</Link>
            <p></p>
            <Link to="/random-link">Go to non-existent page</Link>
        </>
    )
}

function BlogPage() {
    return (
        <>
            <h1>You are in the blog</h1>
            <Link to="/">Back to home</Link>
        </>
    )
}

function NotFound() {
    return (
        <>
            <h1>Page not found</h1>
            <Link to="/">Go to home</Link>
        </>
    )
}

AppWithHash.jsx

import { Link } from '../router/Link'
import { Route } from '../router/Route'
import { HashRouter } from '../router/HashRouter'

export function AppWithHash() {
    return (
        <HashRouter>
            <Route element={<HomePage />} path="/" />
            <Route element={<BlogPage />} path="/blog" />
            <Route element={<NotFound />} path="*" />
        </HashRouter>
    )
}

function HomePage() {
    return (
        <>
            <h1>You are in the home</h1>
            <Link to="/blog">Go to blog</Link>
            <p></p>
            <Link to="/random-link">Go to non-existent page</Link>
        </>
    )
}

function BlogPage() {
    return (
        <>
            <h1>You are in the blog</h1>
            <Link to="/">Back to home</Link>
        </>
    )
}

function NotFound() {
    return (
        <>
            <h1>Page not found</h1>
            <Link to="/">Go to home</Link>
        </>
    )
}

Todo se ve tan fácil y obvio una vez terminado jajaja… para nada se sintió así. Como siempre, tuve que volver a revisar todo mi conocimiento, consultar muchas fuentes y probar mil cosas.

Lo consegui… entre pasadas y venidas en resumen un masomenos.

Implemente:
1)HashRouter: Encargado de agregar el hash en los paths

import React, { useEffect } from 'react'
const location = window.location

const HashRouter = ({children}) => {    
  let containsHashRoute = location.hash
    useEffect(()=>{
       if(containsHashRoute){
        location.href = location.origin + `/${location.hash}`
       }else{
        location.href = location.origin + '/#/'
       }
    },[])

  return (
    <>
        {children}
    </>
  )
}

export default HashRouter

2)Route: Encargado solo de crear una ruta. o el path

import React from 'react'

let routes = []
const Route = ({children,path}) => {
  routes.push(path)

  let route = routes.find((route,i )=> route === path)
  //console.log(route)
  if(route){
    return (
      <>
          {children}
      </>
    )
  }
}

export default Route

3)Switch: Encargado de renderizar solo el componente cuando el path coincida

import React from 'react'

let location = window.location

let formaterPath = (path) => path = path[0] + '#' + path


const Switch = ({children}) => {
    let locationHash = location.hash

    let childrensFind = children.find(children =>{
        let path = formaterPath(children.props.path)

        if(path.includes('*')){
            return children
        }

        if(locationHash.includes('/edit/')){
            locationHash = '#/edit/:id'
        }

        if(path.includes(locationHash)){
            //console.log('Mostar',children.props.path)
            return children
        }
    })

    if(childrensFind){
      return(
        <>
            {childrensFind.props.children}
        </>
      )
    }
}

export default Switch

1. Hook useHistory o useNavigation. Encargado de recargar la pagina dependiendo del path que reciba, (Aqui hago una aclaracion porque me cambia el path pero no me renderiza el componente, no logre resolver este eror)

function useHistory(path){
    return function(path){
        setTimeout(()=>{
            window.location.assign(path)
        })
    }
}

export {useHistory}

5)useParams encargado de obtener el parametro que pasemos

let location = window.location

function useParams(){
    let formatParamIndex = location.hash.lastIndexOf('/') + 1
    let param = location.hash.slice(formatParamIndex)
    
    return{
        params : {
            param
        }
    }
}

export {useParams}

De esta forma ya puedes crear un ruteo basico con un hash y dependiendo de la ruta renderizar un componente o no, obtener parametros de una ruta y dependiendo de un evento o no navegar a tal path.

Todo esto gracias al objeto location de javascript vanilla

# **Solución** Les comparto mi solución al reto donde logramos clonar parte de lo que es `React Router DOM 6`. GitHub: <https://github.com/HaroldZS/custom-react-router-dom> Deploy: <https://haroldzs.github.io/custom-react-router-dom/#/>  Lo primero que vemos al ingresar a la aplicación es la página `Home` desde el cual hacemos algunos testeos utilizando un `HashRouter`. Por ejemplo, podemos navegar hacia la página `About` por medio de un componente custom `Link` de la siguiente manera: * Navegación simple.  * Navegación con estado.  * Navegación con search, donde además podemos cambiar el valor del `search` por medio de un botón que utiliza un custom `useSearchParams` para lograrlo.   * Navegación con search y estado, donde el estado persiste aún si cambiamos el valor del `search`.   Podemos navegar también a través de uno botones que utilizan un custom `useNavigate` y redireccionan de la misma manera que el custom `Link`.  Finalmente, podemos navegar hacia rutas dinámicas y obtener estos parámetros por medio de un custom `useParams`. Para el test, hemos probado lo siguiente: * Navegación simple hacia la página de `Profile` del usuario #73 con un botón que utiliza un custom `useNavigate`.  * Navegación con search y estado hacia la página de `Profile` del usuario #73 con un botón que utiliza un custom `useNavigate`.   Esas fueron las pruebas suficientes como para saber que el clon de `React Router DOM 6` funciona correctamente. Además de redireccionarnos a una página de `Not Found` en caso de no coincidir ninguna ruta.  ## **App.js** ```js import React from "react"; import { HashRouter } from "./components/HashRouter"; import { Route } from "./components/Route"; import { Routes } from "./components/Routes"; import { Home } from "./pages/Home"; import { About } from "./pages/About"; import { NotFound } from "./pages/NotFound"; import { UserProfile } from "./pages/UserProfile"; function App() { return ( <HashRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/user/:id" element={<UserProfile />} /> <Route path="*" element={<NotFound />} /> </Routes> </HashRouter> ); } export default App; ``` Este componente principal usa `HashRouter` para manejar la navegación basada en hash. Dentro de `HashRouter`, las rutas son definidas usando `Routes` y `Route`, donde cada ruta especifica un camino `path` y el componente a renderizar `element`. Esto incluye rutas estándar, rutas dinámicas con parámetros como `/user/:id`, y una ruta comodín `*` para manejar páginas no encontradas. **HashRouter.js** ```js import { createContext, useEffect } from "react"; import { useLocation } from "../hooks/useLocation"; const RouterContext = createContext(); const HashRouter = ({ children }) => { const location = useLocation(); useEffect(() => { if (!window.location.hash) { window.history.replaceState(null, "", "#/"); window.dispatchEvent(new HashChangeEvent("hashchange")); } }, []); return ( <RouterContext.Provider value={{ location }}> {children} </RouterContext.Provider> ); }; export { RouterContext, HashRouter }; ``` Este componente proporciona el contexto de enrutamiento `RouterContext` a toda la aplicación. Utiliza el custom hook `useLocation` para rastrear la ubicación actual en la URL hash. Si la URL no tiene un hash al cargar la página, se agrega automáticamente `#/` para mantener la estructura del enrutamiento. **Link.js** ```js import React from "react"; function Link({ to, children, state = null }) { const handleClick = (e) => { e.preventDefault(); window.history.pushState(state, "", `#${to}`); window.dispatchEvent(new HashChangeEvent("hashchange")); }; return ( {children} ); } export { Link }; ``` Este componente es una versión personalizada de un enlace ``, que permite la navegación interna en la aplicación sin recargar la página. Usa `window.history.pushState` para actualizar la URL y despacha un evento `hashchange` para notificar a la aplicación sobre la nueva ubicación. ## **Route.js** ```js const Route = ({ path, element }) => { return { path, element }; }; export { Route }; ``` Simplemente devuelve un objeto con la ruta y el elemento asociado, siendo más un contenedor de datos que un componente funcional. ## **Routes.js** ```js import React, { useContext } from "react"; import { RouterContext } from "./HashRouter"; const matchPath = (path, pathname) => { const paramNames = []; const regexPath = path .replace(/\/:([^/]+)/g, (full, key) => { paramNames.push(key); return "/([^/]+)"; }) .replace(/\*/g, "(.*)"); const match = pathname.match(new RegExp(`^${regexPath}$`)); if (!match) return null; const params = match.slice(1).reduce((acc, value, index) => { acc[paramNames[index]] = value; return acc; }, {}); return { params }; }; const Routes = ({ children }) => { const { location } = useContext(RouterContext); const matchedRoute = React.Children.toArray(children).find((child) => { const { path } = child.props; if (path === "*") return true; const match = matchPath(path, location.pathname); return match !== null; }); const match = matchedRoute ? matchPath(matchedRoute.props.path, location.pathname) : null; return ( <RouterContext.Provider value={{ location, matchedRoute }}> {matchedRoute ? React.cloneElement(matchedRoute.props.element, { ...match?.params }) : null} </RouterContext.Provider> ); }; export { Routes }; ``` Este componente selecciona y renderiza el componente adecuado según la URL actual. Usa `matchPath` para verificar si la ubicación actual coincide con alguna ruta definida. Si se encuentra una coincidencia, se renderiza el componente correspondiente, pasando los parámetros extraídos de la URL. ## **useLocation.js** ```js import { useState, useEffect } from "react"; const getLocationProps = (location) => { const { href } = location; const hashIndex = href.indexOf("#"); const mainPathname = hashIndex !== -1 ? href.slice(hashIndex + 1) : ""; const otherHashIndex = mainPathname.indexOf("#"); const hash = otherHashIndex !== -1 ? mainPathname.slice(otherHashIndex) : ""; const searchIndex = mainPathname.indexOf("?"); const search = searchIndex !== -1 ? mainPathname.slice(searchIndex) : ""; const pathname = mainPathname.split("?")[0].split("#")[0]; const state = window.history.state; return { hash, pathname, search, state }; }; function useLocation() { const [location, setLocation] = useState(getLocationProps(window.location)); useEffect(() => { const handleLocationChange = () => { setLocation(getLocationProps(window.location)); }; window.addEventListener("popstate", handleLocationChange); window.addEventListener("hashchange", handleLocationChange); return () => { window.removeEventListener("popstate", handleLocationChange); window.removeEventListener("hashchange", handleLocationChange); }; }, []); return location; } export { useLocation }; ``` Este hook personalizado rastrea la ubicación actual de la URL, detectando cambios en el hash y en la historia de navegación `popstate`. Devuelve un objeto con detalles sobre el hash, la ruta `pathname`, los parámetros de búsqueda `search`, y el estado `state`. **useNavigate.js** ```js function useNavigate() { function navigate(to, state = null) { window.history.pushState(state, "", `#${to}`); window.dispatchEvent(new HashChangeEvent("hashchange")); } return navigate; } export { useNavigate }; ``` Este hook personalizado permite navegar a diferentes rutas actualizando la URL hash sin recargar la página. La función `navigate` cambia la URL y despacha un evento `hashchange` para que otros componentes respondan al cambio de ruta. ## **useParams.js** ```js import { useContext } from "react"; import { RouterContext } from "../components/HashRouter"; function useParams() { const { location, matchedRoute } = useContext(RouterContext); const { pathname } = location; const extractParams = (path, pathname) => { const paramNames = []; const regexPath = path .replace(/([.*+?^${}()|[\]\\])/g, "\\$1") .replace(/:(\w+)/g, (match, paramName) => { paramNames.push(paramName); return "([^/]+)"; }); const regex = new RegExp(`^${regexPath}$`); const match = pathname.match(regex); if (match) { const params = {}; paramNames.forEach((name, index) => { params[name] = match[index + 1]; }); return params; } return null; }; const path = matchedRoute?.props.path || pathname; const params = extractParams(path, pathname); return params; } export { useParams }; ``` Este hook extrae los parámetros dinámicos de la ruta actual, como `:id` en `/user/:id`. Utiliza la ruta actual `pathname` y la ruta coincidente `matchedRoute` para construir un objeto con los parámetros que se pasaron en la URL. ## **useSearchParams.js** ```js import { useContext } from "react"; import { RouterContext } from "../components/HashRouter"; function useSearchParams() { const { location } = useContext(RouterContext); const getSearchParams = () => { return new URLSearchParams(location.search); }; const setSearchParams = (newParams) => { const searchParams = new URLSearchParams(location.search); Object.keys(newParams).forEach((key) => { if (newParams[key] === null) { searchParams.delete(key); } else { searchParams.set(key, newParams[key]); } }); const newLocation = `${location.pathname}?${searchParams.toString()}`; const state = location.state || null; window.history.pushState(state, "", `#${newLocation}`); window.dispatchEvent(new HashChangeEvent("hashchange")); }; return [getSearchParams(), setSearchParams]; } export { useSearchParams }; ``` Este hook permite obtener y modificar los parámetros de búsqueda en la URL hash. Proporciona una función para acceder a los parámetros actuales `getSearchParams` y otra para actualizarlos `setSearchParams`, lo que desencadena un cambio de URL y un evento `hashchange`. **About.js** ```js import React from "react"; import { useLocation } from "../hooks/useLocation"; import { useSearchParams } from "../hooks/useSearchParams"; function About() { const location = useLocation(); const { state } = location; console.log(location); const [searchParams, setSearchParams] = useSearchParams(); const query = searchParams.get("query"); const handleSearch = () => { setSearchParams({ query: "harold-query" }); }; return ( <>

About

{state && ( <section>

State section

{Object.keys(state).map((key) => (

{key}: {state[key]}

))} </section> )} {query && ( <section>

Search side

Search Query: {query}

<button onClick={handleSearch}>Search New Query</button> </section> )} ); } export { About }; ``` Este componente muestra información sobre la página de `About`, incluyendo el estado almacenado en la historia de navegación `state` y los parámetros de búsqueda `searchParams`. Incluye un botón para modificar el parámetro de búsqueda y actualizar la URL hash. **Home.js** ```js import React from "react"; import { Link } from "../components/Link"; import { useLocation } from "../hooks/useLocation"; import { useNavigate } from "../hooks/useNavigate"; function Home() { const location = useLocation(); console.log(location); const navigate = useNavigate(); return (

Home

<Link to="/about">

To About with Link component

</Link> <Link to="/about" state={{ link: "link value" }}>

To About with Link component & state

</Link> <Link to="/about?query=new">

To About with Link & search

</Link> <Link to="/about?query=new" state={{ link: "link value" }}>

To About with Link, search & state

</Link> <button onClick={() => navigate("/about")}> To about with useNavigate </button> <button onClick={() => navigate("/about?query=new")}> To about with useNavigate & search </button> <button onClick={() => navigate("/about", { navigate: "navigate value" })} > To about with useNavigate & state </button> <button onClick={() => navigate("/about?query=new", { navigate: "navigate value" }) } > To about with useNavigate, search & state </button> <button style={{ backgroundColor: "orange", color: "white" }} onClick={() => navigate("/user/73")} > To user #73 profile </button> <button style={{ backgroundColor: "orange", color: "white" }} onClick={() => navigate("/user/73?query=new", { user: "user data" })} > To user #73 profile with search & state </button>

); } export { Home }; ``` Este componente muestra la página de `Home` ofrece múltiples opciones de navegación usando `Link` y `useNavigate`, cada uno con diferentes combinaciones de parámetros de búsqueda y estado. Esto demuestra cómo se pueden manejar diferentes tipos de navegación dentro de la aplicación. **NotFound.js** ```js import React from "react"; function NotFound() { return

NotFound

; } export { NotFound }; ``` Este componente simple se renderiza cuando no se encuentra ninguna ruta coincidente, mostrando un mensaje `NotFound`. **UserProfile.js** ```js import React from "react"; import { useParams } from "../hooks/useParams"; import { useLocation } from "../hooks/useLocation"; import { useSearchParams } from "../hooks/useSearchParams"; function UserProfile() { const location = useLocation(); const { state } = location; console.log(location); const params = useParams(); const [searchParams, setSearchParams] = useSearchParams(); const query = searchParams.get("query"); const handleSearch = () => { setSearchParams({ query: "harold-query" }); }; return ( <>

User Profile

User ID: {params.id}

{state && ( <section>

State section

{Object.keys(state).map((key) => (

{key}: {state[key]}

))} </section> )} {query && ( <section>

Search side

Search Query: {query}

<button onClick={handleSearch}>Search New Query</button> </section> )} ); } export { UserProfile }; ``` Este componente muestra el perfil de un usuario específico, identificando al usuario a través del parámetro de ruta `:id`. También maneja el estado y los parámetros de búsqueda, permitiendo que el componente muestre información adicional según la URL actual.

Reto: crea tu propio React Router

.
El reto consiste en clonar React Router. En el reto anterior ya vimos cómo construir un router para JavaScript vanilla, donde dependiendo del location.hash renderizábamos un código u otro.
.
Lo que debemos hacer ahora es lo mismo, pero transformado en componentes de React. Debes crear tu propio HashRouter y tu propio componente Route para renderizar un componente o no, dependiendo de si esa propiedad path (o como queramos llamarla) coincide con la URL o con el hash en el que nos encontremos.
.
Es obligatorio que creemos un componente Link que nos ayude a hacer la navegación simplemente con JavaScript. No será una etiqueta <a></a> normal, sino una etiqueta que haga que cambie la URL y que, a su vez, cambie la ruta que renderizamos.
.
Ese es el reto principal, pero si quieres ir más allá, también puedes clonar los hooks de React Router DOM, como useLocation y useNavigate, para que también desde JavaScript podamos ejecutar esas funciones, y dichas funciones cambien la URL y, por ende, el contenido de la aplicación.

Link del repo utilizando el router creado por mi implementando el proyecto del curso

https://github.com/TheJB4/react-router-by-thejb29