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

最新推荐文章于 2022-09-02 16:11:12 发布

原创最新推荐文章于 2022-09-02 16:11:12 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 整理同时被 2 个专栏收录

11 篇文章

订阅专栏

react-router

5 篇文章

订阅专栏

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

当遇到以上的情况， 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>