Estoy trabajando en una página de Instagram simulada y tengo íconos en la barra de menú superior para "Inicio", "Bandeja de entrada", "Explorar", "Notificaciones" e "Ícono de perfil". Antes de implementar React-Router, los tenía como íconos normales que no hacían nada, pero al menos aparecían en sus lugares cuando se cargaba la página. Después de (intentar) implementar React-Router en ellos para que vayan a sus respectivas páginas, ahora solo aparece el ícono "Inicio" y el resto no. Espero estar explicando esto correctamente. De todos modos, aquí es mi código para el componente de menú en el que estoy trabajando:

 import React from 'react'; import '../styles/css/menu.css'; import '../styles/css/navigation.css'; import '../styles/css/App.css'; import { BrowserRouter as Router, Routes, Route} from 'react-router-dom' import { ReactComponent as Home } from '../images/home.svg'; import { ReactComponent as Inbox } from '../images/inbox.svg'; import { ReactComponent as NewPost } from '../images/newpost.svg'; import { ReactComponent as Explore } from '../images/explore.svg'; import { ReactComponent as Notifications } from '../images/notifications.svg'; import image from '../images/Dave_headshot.jpg'; import ProfileIcon from './ProfileIcon'; const Menu = () => { return ( <div className='menu'> <Router> <Routes> <Route exact path='/' element={<Home className='icon'/>} /> <Route path='/Inbox' element={<Inbox className='icon'/>} /> <Route path='/NewPost' element={<NewPost className='icon'/>} /> <Route path='/Explore' element={<Explore className='icon' />} /> <Route path='/Notifications' element={<Notifications className='icon'/>} /> <Route path='/Profile' element={<ProfileIcon className='icon' iconSize='small' image={image} />}/> </Routes> </Router> </div> ) } export default Menu