1

tengo un proyecto en react donde quiero utilizar react router y que el cambio de URL se produzca desde una barra de navegacion que es un componente separado de la pagina principal, puedo navegar a travez de los componentes que cambiaran segun la url escribiendo directamente la url pero no que navegue a travez de la barra de navegacion, actualmente el codigo del archivo main es el siguiente:

import React from 'react'
import LoginForm from './routes/LoginForm.jsx'
import { CheckPage } from './routes/CheckPage.jsx'
import { StartPage } from './routes/StartPage.jsx'
import { Services } from './routes/Services.jsx'
import { Comments } from './routes/Comments.jsx'
import { AboutUs } from './routes/AboutUs.jsx'
import ReactDOM from 'react-dom/client'
import NavBar from './components/NavBar.jsx'
import ErrorPage from './routes/ErrorPage.jsx'
import './style.scss'
import { createBrowserRouter, RouterProvider, BrowserRouter } from "react-router-dom"

const router = createBrowserRouter([
  {
    path: '/',
    element: <StartPage />,
    errorElement: <ErrorPage />,
  },
  {
    path: '/login',
    element: <LoginForm />,
  },
  {
    path: '/check',
    element: <CheckPage />,
  },
  {
    path: '/services',
    element: <Services />,
  },
  {
    path: '/comments',
    element: <Comments/>,
  },
  {
    path: '/aboutUs',
    element: <AboutUs />,
  },
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <div className='container'>
      <NavBar />
      <RouterProvider router={router} />
  </div>
)

y el de la barra de navegacion es:

import menuIcon from '/src/img/icons/menu.png'
import isoTipoWhite from '/src/img/LozanoTechIsotipoWhite.png'
import { Button } from "./Button/Button";
import { useState } from "react";
import { Link, Outlet } from 'react-router-dom';

const NavBar = ({onClickLogin, onClickCheck, onClickStart, onClickServices, onClickAboutUs, onClickComments, onClickMenu}) => {

    const [displayMenu, setDisplayMenu] = useState(false)

    return(
        <div className='NavBar'>

            { displayMenu && 
                <div className="menu">
                    <img className="burguerMenuIcon" src={menuIcon} onClick={ () => {setDisplayMenu(!displayMenu)}}/>
                    <Link to={'/'}> <h3>Inicio</h3> </Link>
                    <Link to={'services'}> <h3>Servicios</h3> </Link>
                    <Link to={'comments'}> <h3>Comentarios</h3> </Link>
                    <Link to={'aboutUs'}> <h3>Sobre nosotros</h3> </Link>
                </div> 
            }

            { !displayMenu && 
                <img className="burguerMenuIcon" src={menuIcon} onClick={ () => {setDisplayMenu(!displayMenu)}}/>
            }
            

            <div className="info">
                <img src={isoTipoWhite} className="logo"/>
                <Link to={'/'}> <h3>Inicio</h3> </Link>
                <Link to={'aboutUs'}> <h3>Sobre nosotros</h3> </Link>
                <Link to={'services'}> <h3>Servicios</h3> </Link>
                <Link to={'comments'}> <h3>Comentarios</h3> </Link>
            </div>

            <div className="actions">
                <Button className='access' onClick={onClickLogin} label='Acceso para tecnicos' variant='action'></Button>
                <Button onClick={onClickCheck} label='Consultar reparacion' variant='action'></Button>
            </div>
        </div>
    )
}

export default NavBar;

con este codigo obtengo un error por consola que segun una IA es porque la NavBar no esta dentro del contexto del router, puedo solucionarlo añadiendo la NavBar a cada uno de los componentes que se renderizan por las rutas pero preferiria usar una solucion que solo renderice el componente de la ruta para tomar en cuenta en proyectos mas grandes.

1 respuesta 1

2

Puedes usar rutas anidadas, la ruta principal tendría dentro de su componente tanto la barra de navegación como el elemento <Outlet> que es una manera de indicar donde se deben renderizar las rutas hijas, de este modo te aseguras que no solo la Navbar este dentro del contexto sino que sera visible siempre.

Supongamos que tengo una pagina con una barra de navegación y 3 secciones, Store, About y MyAccount, el enrutador quedaría de esta manera:

main.jsx

const router = createBrowserRouter([
  {
    path: '/',
    element: <App></App>,
    children: [
      {
        path: '/store',
        element: <Store></Store>
      },
      {
        path: '/about',
        element: <About></About>
      },
      {
        path: '/myaccount',
        element: <MyAccount></MyAccount>
      }
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root'))
  .render(<RouterProvider router={router}/>)

El componente de la ruta principal:

export default function App() {

  const navigate = useNavigate() /* hook de navegacion */

  useEffect(() => navigate('/store'), []) /* ruta cargada por defecto */

  return (
    <div className="App">
      <Navigation></Navigation> { /* barra de navegacion, sera visible en todas las rutas */ }
      <Outlet></Outlet> { /* Outlet le dice al Router donde debe renderizar los elementos hijos */ }
    </div>
  );
}

Entonces al iniciar la aplicación, se navega hacia '/' y se renderiza la barra de navegación, el useEffect redirige hasta la sección principal (podría ser 'Inicio' por ejemplo yo en mi caso puse 'Store') y la sección se renderiza justo donde se encuentra la etiqueta <Outlet>.

Navigation.jsx:

const Navigation = () => 
   <div  style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
    <Link style={LinkStyle} to={'/store'}>STORE</Link>
    <Link style={LinkStyle} to={'/about'}>ABOUT</Link>
    <Link style={LinkStyle} to={'/myaccount'}>MY ACCOUNT</Link>
  </div>

Ejemplo

<App> seria un buen lugar para colocar un footer por ejemplo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.