用react-router4实现路由嵌套出问题

当前的页面地址是http://localhost:2000/#/home这个,我想变成http://localhost:2000/#/home/haha这样
路由文件是:

const PrimaryLayout = () => (
    <div className="primary-layout">
     
      <main>
        <Route path="/" exact component={Home} />
        
        <Route path="/home" component={Home} />  
        
        <Route path="/detail" component={Hdetail}/>
        <Route path="/zhuanlan" component={Zl}/>
        <Route path="/find" component={Find}/>
        <Route path="/collect" component={Collect}/>
        <Route path="/open" Component={Open}/>
      </main>
    </div>
)

当前组件是:

<div className="homeMenuConLeft">
      {
         this.state.HomeMenuTop.map((item,index)=>
              <span key={index} className={this.state.menuOne===item.tab?"homesortactive":""} data-tab={item.tab}  onClick={this.clickTop}>
               <Link to={{pathname:"/home/haha"} } >{item.name}</Link>
               <Route path="/home/:name" component={Home}/>
               </span>
         )
     }
</div>

就是home里面有两个选择,点击选择改变浏览器的地址栏,然后从后台调取数据,这个功能。根本来说我是想改变浏览器的地址栏的地址,我用的是Link改变路由,然后对应的组件还是home组件,但是点击之后,页面中鼠标就不能点击别的了,就是类似卡住,点击别的选项没有没有用,而且也没有什么错误信息,这是为什么?实现这种功能,是不是本来我想的就是错的?

阅读 5.6k
3 个回答
新手上路,请多包涵
            <Route path="/home" component={Home} />  
                <Route path="/detail" component={Hdetail}/>
                <Route path="/zhuanlan" component={Zl}/>
                <Route path="/find" component={Find}/>
                <Route path="/collect" component={Collect}/>
                <Route path="/open" Component={Open}/>
            </Route>

利用history改变了浏览器地址可以实现这种

推荐问题
宣传栏