Can't get image links to show React Router-CodePudding

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

CodePudding user response：

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 />} />

CodePudding user response：

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.