react，点击首页里的某个图标，将路由跳转到指定的路由页面，页面没有反应？

已写的代码如下：

function Homepage() {
    return <div>
      <Swiper />
      <div className='navigation'>
       <div className='nav1' onClick={()=><Navigate to="/home/houselist/*" />}>
        <img src={require(`../Homepage/Navigation/nav-1.png`)} alt='' />
        <h2>整租</h2>
       </div>
       <div className='nav2'>
        <img src={require(`../Homepage/Navigation/nav-2.png`)} alt='' />
        <h2>合租</h2>
       </div>
       <div className='nav3'>
        <img src={require(`../Homepage/Navigation/nav-3.png`)} alt='' />
        <h2>地图找房</h2>
       </div>
       <div className='nav4'>
        <img src={require(`../Homepage/Navigation/nav-4.png`)} alt='' />
        <h2>去出租</h2>
       </div>
      </div>
    </div>;
}

点击首页里的“整租”或其上面的图标，界面没有报错，但也没有跳转到底部导航栏里“找房”对应的页面，且底部导航栏里“找房”及其图标没有高亮显示，如下图：

请问是什么原因导致？如何解决？

路由 配置的不对呗