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.