④react-router4.x 嵌套路由的使用

本文详细介绍了如何使用动态路由和嵌套路由在React应用中实现内容的灵活切换,通过具体的代码示例展示了用户页面的路由配置和组件的动态加载,适用于希望提升Web应用导航体验的前端开发者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当遇到以上的情况, content 部分内容需要根据 content menu的点击儿变换,我们就需要用动态路由来实现

主要的代码逻辑:

用户页面会涉及到路由嵌套

入口文件代码:

<Router>
  <div>
     <header className="title">
         <Link to="/">首页组件</Link>
         <Link to="/user">用户页面</Link>
         <Link to="/shop">商户</Link>
     </header>             
     <Route exact path="/" component={Home} />
     <Route path="/user" component={User} />
     <Route path="/shop" component={Shop} />
   </div>
</Router>

User组件代码

<div className="content">
  <div className="left">
      <Link to="/user/">个人中心</Link>
      <Link to="/user/info">用户信息</Link>
  </div>
  <div className="right">          
    <Route exact path="/user/" component={Main} />
    <Route  path="/user/info" component={Info} />
  </div>
</div>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值