Estamos tratando de implementar un proyecto de reacción que tiene 3 tipos diferentes de la misma aplicación para 3 propósitos diferentes. Piense en ello como si el usuario eligiera cuál usar en la pantalla principal. Los 3 tipos tienen una estructura de página similar pero diferente, una barra de navegación diferente, etc.
Usé un enrutador para la página principal donde eligen a qué tipo de aplicación quieren ir, con la ruta "/", y usé diferentes enrutadores para diferentes tipos de aplicaciones porque su barra de navegación, etc. es diferente. Pero la barra de navegación aparece en la pantalla principal incluso cuando no está presente en el enrutador.
Sé que suena complicado, pero lo mostraré con fragmentos de código y capturas de pantalla.
Aplicación.js
function App() { return ( <> <Router> <Routes> <Route path = "/" exact element={<CirclePage />}/> </Routes> </Router> <Router> <Routes> <Route path = "/homepage-clubs" exact element={<HomepageClubs />}/> </Routes> </Router> <Router> <Navbar/> <Routes> <Route path='/homepage' exact element={<Homepage />}/> <Route path='/events' exact element={<Events/>}/> <Route path='/clubs' exact element={<Clubs/>}/> <Route path='/contact' exact element={<Contact/>}/> <Route path='/notifications' exact element={<Notifications/>}/> <Route path='/profile' exact element={<Profile/>}/> </Routes> </Router> </> ); } export default App;Navbar es la barra de navegación que escribí en reaccionar.
La pantalla de inicio es como este cajero automático: pantalla de la aplicación en la primera inicialización
No tengo ni idea de por qué hay una barra de navegación debajo de la pantalla. Es posible que no haya entendido cómo funcionan realmente los enrutadores, no estoy seguro. Necesito que esa barra de navegación desaparezca porque cada tipo de aplicación tendrá un tipo diferente de barra de navegación (crearé diferentes barras de navegación para ellos) y la barra de navegación no debería estar visible en la pantalla principal. ¿Cual podría ser el problema?
Está renderizando los tres enrutadores al mismo tiempo, y el tercero incluye el componente Navbar , que también se renderiza siempre. Debe usar un solo enrutador para representar todas las rutas. Si desea diferentes diseños para rutas específicas, puede usar un componente contenedor para representar la barra de Navbar . Renderice el último conjunto de rutas en una ruta genérica que coincida con cualquier cosa que no coincida más específicamente, junto con la barra de Navbar .
function App() { return ( <> <Router> <Routes> <Route path="/" element={<CirclePage />} /> <Route path="/homepage-clubs" element={<HomepageClubs />} /> <Route path="*" element={ <> <Navbar /> <Routes> <Route path="/homepage" element={<Homepage />} /> <Route path="/events" element={<Events />} /> <Route path="/clubs" element={<Clubs />} /> <Route path="/notifications" element={<Notifications />} /> <Route path="/profile" element={<Profile />} /> </Routes> </> } /> </Routes> </Router> </> ); }