Como se ve en la imagen anexa, los componentes {navBar} y {searchBar} no se leen nunca y no se renderizan.
siguiendo los pasos equivalentes a los procesos de una ruta, encuentro el inconveniente por el cual no se renderizan los componentes dentro de los elementos. ¿cual es la razón a este problema y como se podría solucionar?
INDEX
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(
<App />
,
document.getElementById('root')
);
APP
import { AppRouter } from "./components/routers/AppRouter"
export const App = () => {
return (
<>
<AppRouter/>
</>
)
}
NAVBAR
export const navBar = () => {
return (
<div>
<h1>prueba barra de navegación</h1>
</div>
)
}
SEARCH
export const searchBar = () => {
return (
<div>
<h1>prueba search bar</h1>
</div>
)
}
APPROUTER
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { navBar } from "../navbar/navBar";
import { searchBar } from "../searchbar/searchBar";
export const AppRouter = () => {
return (
<BrowserRouter>
<h1>PRUEBA INICIAL</h1>
<Routes>
<Route path="/" element={<navBar />}/>
<Route path="/search" element={<searchBar />}/>
</Routes>
</BrowserRouter>
)
}
NavBar - SearchBar