Tengo problemas para navegar entre diferentes páginas en el enrutador de reacción. Tengo mi ReactDom.render() de la siguiente manera:
ReactDOM.render(( <BrowserRouter> <App/> </BrowserRouter>), document.getElementById('root'))Aquí tengo App.js con solo mi casa y una segunda página (Park). Si coloco fuera de las etiquetas, la barra de navegación está visible, pero cuando está dentro de las etiquetas, la barra de navegación ya no está visible.
function App() { const classes = styles(); return ( <> <Router> <NavBar /> <Routes> <Route path="/" element={<Home />} /> <Route path="/park_your_car" element={<Park />} /> </Routes> </Router> </> ); } export default App;Luego coloqué mis enlaces dentro de mi NavBar.js
function NavBar() { const classes = styles() return ( <div> <Toolbar position = "sticky" color="rgba(255, 215, 0)" className={classes.bar}> <img src={logo} className={classes.logo}/> <Typography variant="h6" className={classes.menuItem}> <Link to="/"><b>Home</b> </Link> </Typography> <Typography variant="h6" className={classes.menuItem}> <Link to="/park_your_car"><b>Park Your Car</b></Link> </Typography> <Typography variant="h6" className={classes.menuItem}> <Link className="menuItem" to="/find_your_car"><b>Find Your Car</b></Link> </Typography> <Typography variant="h6" className={classes.menuItem}> <Link className="menuItem" to="/exit_from_lot"><b>Exit Lot</b></Link> </Typography> <CustomButton txt="Contact Us" /> </Toolbar> </div> ) }Debe eliminar la etiqueta <Router> y sacar <Navbar> de las <Routes>
function App() { const classes = styles(); return ( <> <NavBar /> <Routes> <Route path="/" element={<Home />} /> <Route path="/park_your_car" element={<Park />} /> </Routes> </> ); } ¿Por qué debería eliminar <Router> de la aplicación?
Porque aquí, en index.js, ya estás usando BrowserRouter
import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(( <BrowserRouter> <App/> </BrowserRouter>), document.getElementById('root'))