react router @4 和 vue路由 详解(三)react如何在路由里面定义一个子路由

  • Z时代
  • 2024-01-10
  • 分类：综合

react

完整版：https://www.cnblogs.com/yangyangxxb/p/10066650.html

5、react如何在路由里面定义一个子路由？

 

　　a、引入在需要子路由的页面引入Route标签　　

 

　　　<Route path='/noteDetail/home' component={NodeDe} />

　　b、举个????(糖炒栗子，我的爱，为什么我自己做的????都那么难吃？？？)

　　　　

　　　　我们在home页面里(左边一溜的父组件)该点击的地方

export const Home = () => (
  <ul>
    <li>
      <NavLink to='/home' exact activeStyle ={selectedStyle}>首页</NavLink>
    </li>
    <li>
      <NavLink to='/about' activeStyle ={selectedStyle}>关于我们</NavLink>
    </li>
    <li>
      <NavLink to='/event' activeStyle ={selectedStyle}>企业事件</NavLink>
    </li>
    <li>
      <NavLink to='/product' activeStyle ={selectedStyle}>公司产品</NavLink>
    </li>
    <li>
      <NavLink to='/us' activeStyle ={selectedStyle}>联系我们</NavLink>
    </li>
  </ul>
)

 　　　　我们在home页面里(左边一溜的父组件)设置内容应该不同的地方

      <Redirect exact from="/" to="/home"></Redirect>
      <Route path='/home' exact component={Home}/>
      <Route path='/about' component={About}/>
      <Route path='/event' component={Event}/>
      <Route path='/product' component={Product}/>    
      <Route path='/us' component={Us}/>

　　　　我们在关于我们页面该点击的地方

export const AboutMenu = () => (
  <ul className="about-menu">
    <li>
      <NavLink to='/about' exact activeStyle ={selectedStyle}>公司简介</NavLink>
    </li>
    <li>
      <NavLink to='/about/history' activeStyle ={selectedStyle}>公司历史</NavLink>
    </li>
    <li>
      <NavLink to='/about/services' activeStyle ={selectedStyle}>公司服务</NavLink>
    </li>
    <li>
      <NavLink to='/about/location' activeStyle ={selectedStyle}>企业位置</NavLink>
    </li>
  </ul>
)

　　　　我们在关于我们页面该实现内容不同的地方

      <Route path='/about' exact component={Company}/>
      <Route path='/about/history' component={History}/>
      <Route path='/about/services' component={Services}/>
      <Route path='/about/location' component={Location}/>

　　　　由此便实现了react子路由

以上是 react router @4 和 vue路由 详解(三)react如何在路由里面定义一个子路由 的全部内容， 来源链接： utcz.com/z/382225.html

回到顶部