无法获取图像链接以显示 React 路由器

Question

我正在制作一个模拟的Instagram页面，我在顶部菜单栏上有"首页"、"收件箱"、"探索"、"通知"等图标。,"概要Icon"。在实现React-Router之前，我把它们当作普通的图标，不做任何事情，但它们至少在页面加载时显示在它们的位置上。(尝试)在它们上实现React-Router后，让它们去到各自的页面，只有"home";Icon出现了，其他的都没有。我希望我解释得正确。无论如何，这是我的菜单组件的代码，我正在工作:

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

Answer 1

你应该把它们放在Link而不是Route。

<Link to={"/Inbox"}>
<Inbox className='icon'/>
</Link>

当然，对于链接，你应该根据它们创建受尊重的页面。

<Route path={"/Inbox"} element={<InboxPage />} />

Answer 2

你基本上是这样写的:如果用户访问例如url "/收件箱"，则呈现收件箱图标。如果你想把图标链接到一个url，你需要一个<Link>而不是<Route>。

使用路由标签，你可以根据url定义页面内容。