无法获取图像链接以显示 React Router

Question

我正在制作一个模拟 Instagram 页面，顶部菜单栏上有“主页”、“收件箱”、“探索”、“通知”和“个人资料图标”的图标。在实施 React-Router 之前，我将它们作为常规图标使用，没有任何作用，但它们至少会在页面加载时显示在它们的位置。在（尝试）对它们实施 React-Router 以使它们转到各自的页面之后，现在只显示“主页”图标，其余的则不显示。我希望我解释正确。无论如何，在这里是我正在处理的菜单组件的代码：

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 "/Inbox"，收件箱图标将呈现。如果你想 link 图标到 url 你需要 <Link> 而不是 <Route>.

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

无法获取图像链接以显示 React Router

Can't get image links to show React Router

javascript

reactjs

react-router