单击带有反应路线的按钮后显示当前页面

Question

我尝试在路由标签中使用精确，但链接正在刷新，但页面没有刷新。这是我的代码。我也尝试在每个路由标签上添加确切的内容，但它仍然无法正常工作。链接正在刷新以显示报告或产品，但页面上的内容仍然是主文件的内容。

这是我的app.js，我已经导入了所有的组件文件：

<Navbar/>
 <Router>
  <Sidebar/>
  <Switch>
   <Route exact  Path='/' component={Home}/>
   <Route exact Path='/reports' component={Reports}/>
   <Route exact  Path='/products' component={Product}/>
   <Route  exact Path='/services' component={Services}/>
   <Route  exact Path='/contact' component={Contact}/>
   <Route  exact Path='/signup'component={Signup}/>
  </Switch>
 </Router>

这是我的 Sidebar.js：

function Sidebar() {
    const [sidebar,setSidebar]=useState(false)
    const showSidebar=()=>setSidebar(!sidebar);
    return (
        <>
        <IconContext.Provider  value={{color:'#fff'}}>
        <nav className={sidebar ? 'nav-menu2 active':'nav-menu2'}>
        <ul className='nav-menu2-items' onClick={showSidebar}>
     
        {SidebarData.map((item,index)=>{
           return(
               <li key={index} className={item.cName}>
               <Link to={item.path}>
               {item.icon}
               <span>
                   {item.title}
             </span>
               </Link>
              </li>
           );
        })
    }
        </ul> 
        </nav>
        </IconContext.Provider>
       </>
    );
}

这是我的数据文件：

export const SidebarData=[
     {
     title:'Home',
     path:'/',
     icon:<AiIcons.AiFillHome/>,
     cName: 'nav-text'
},
{
    title:'Reports',
    path:'/reports',
    icon:<IoIcons.IoIosPaper/>,
    cName: 'nav-text'
},
{
    title:'Products',
    path:'/products',
    icon:<IoIcons.IoMdRibbon/>,
    cName: 'nav-text'
},
{
    title:'Services',
    path:'/services',
    icon:<IoIcons.IoIosPeople/>,
    cName: 'nav-text'
},
{
    title:'Contact us',
    path:'/contact',
    icon:<AiIcons.AiFillMail/>,
    cName: 'nav-text'
},
{
    title:'Sign Up',
    path:'/signup',
    icon:<FaIcons.FaUserAlt/>,
    cName: 'nav-text'
}
]

Answer 1

路径应该是小写的

<Router>
  <Sidebar/>
  <Switch>
   <Route exact  path='/' component={Home}/>
   <Route exact path='/reports' component={Reports}/>
   <Route exact  path='/products' component={Product}/>
   <Route  exact path='/services' component={Services}/>
   <Route  exact path='/contact' component={Contact}/>
   <Route  exact path='/signup'component={Signup}/>
  </Switch>
 </Router>