I am working on a mock Instagram page and I have icons going across the top menu bar for "Home", "Inbox", "Explore", "Notifications" & "Profile Icon". Before implementing React-Router I had them as just regular icons that didn't do anything, but they did at least show up in their places when the page loaded. After (trying) to implement React-Router on them to make them go to their respective pages, only the 'Home" icon is showing up now and the rest of them aren't. I hope I am explaining this correctly. Anyway, here is my code for the menu component I'm working on:
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
You should put them in Link instead of Route.
<Link to={"/Inbox"}>
<Inbox className='icon'/>
</Link>
Of course for links to go somewhere you should create the respected pages according to them.
<Route path={"/Inbox"} element={<InboxPage />} />
You basically coded this:
If user visits eg url "/Inbox", the inbox Icon renders. If you want to link the icon to a url you need a <Link> not <Route>.
With the route tags you can define the page content depending on the url.