路由配置

在点击导航选项的时候,让对应内容填充的到页面,实现这种效果的方式就是路由。简单来说,路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径来请求不同的资源。

什么是路由

在点击导航选项的时候,让对应内容填充的到页面,实现这种效果的方式就是路由。

简单来说,路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径来请求不同的资源。

在 umi 中,应用都是单页应用,页面地址的跳转都是在浏览器端实现的,不会去重新请求服务端获取 html。

html 只是在应用初始化的时候加载一次。

所有的页面都是由不同的组件构成,页面的切换其实就是不同组件的切换,你只需要在配置中把不同的路由路径和对应的组件关联上即可。

单页应用的功能示意图如下:

路由配置

路由配置方法

在 umi 应用中,路由的配置是在/config/config.jsexports.routes 中配置。

基本

exports.routes 需要是一个数组,数组中的每一个对象是一个路由信息,比如:

exports.routes = [
  {
    path: '/',
    component: 'App',
  }, 
  {
    path: '/user',
    component: 'User',
  }
];

其中,path 表示页面访问路径,component 表示 page 下的文件名,比如 App, User 分别表示 page/Apppage/User。这样,访问 http://localhost:7001/http://localhost:7001/user 则会有展示 App, User 中的内容。

routes

当需要有一个 layout 作为展示,可以设置 routes

exports.routes = [
  {
    path: '/',
    component: 'App',
    routes: [
        {
          path: 'list'
          component: 'List',
        }, 
        {
          path: 'admin'
          component: 'Admin',
        }
    ]
  }, 
  {
    path: '/user',
    component: 'User',
  }
];

page/App 中:

export default (props) => <div style={{padding: 20}}>
    {this.props.children}
</div>

这样访问 /list/admin 将会都有这个 layout

更多配置信息和路由使用方式请参考 umi 官方文档。

实战配置

我们已经知道了如何在 umi 中配置路由了,那么下面就来实操一把。

第一步:创建页面组件

根据侧边导航样式,我们在 Dashboard 这个目录层级下有三个页面组件需要创建。

src/page 文件夹下创建 Dashboard 文件夹,同时在该文件夹中新建 Analysis.js , Monitor.js, Workplace.js 三个文件,目录结构如下:

.
├── Dashboard
│   ├── Analysis.js
│   ├── Monitor.js
│   └── Workplace.js
...// 省略其他章节中的目录

三个文件中,我们分别添加简单的函数组件。

// Analysis.js
export default () => {
   return <h1>Analysis Page</h1>
}
// Monitor.js
export default () => {
  return <h1>Monitor Page</h1>
};
// Workplace.js
export default () => {
  return <h1>Workplace Page</h1>
};

第二步:配置应用路由

在《初始化项目》一节中你已经用配置式路由添加了 helloworld 路由,这里在 config.js 中我们添加本章的三个路由:

export default {
  routes: [{
    path: '/',
    component: '../layout',
    routes: [
      {
        path: '/',
        component: 'Helloworld',
      },
      {
        path: '/helloworld',
        component: 'Helloworld'
      },
      {
        path: '/dashboard',
        routes: [
          { path: '/dashboard/analysis', component: 'Dashboard/Analysis' },
          { path: '/dashboard/monitor', component: 'Dashboard/Monitor' },
          { path: '/dashboard/workplace', component: 'Dashboard/Workplace' }
        ]
      },
    ]
  }],
};

这段配置的意思是指:

  • 访问 / 下面的路由的时,使用 page 文件夹下的 ../layout 布局文件渲染页面,默认展示Helloworld组件
  • 访问 /dashboard/analysis 时,使用 page 文件夹下的 Dashboard/Analysis 组件渲染到 layout 文件中 children 部分
  • 访问 /dashboard/monitor 时,使用 page 文件夹下的 Dashboard/Monitor 组件渲染到 layout 文件中 children 部分
  • 访问 /dashboard/workplace 时,使用 page 文件夹下的 Dashboard/Workplace 组件渲染到 layout 文件中 children 部分

第三步:配置侧边栏导航

万事俱备,只欠东风,路由已经和相应的页面组件关联起来了,现在我们只需要配置导航,使得能在点击导航时,触发 URL 刷新,路由根据配置返回和当前 URL 匹配的内容.

我们用 Link 组件(相当于<a>) 实现路由的跳转.

import Link from 'umi/link';


...

<Sider width={256} style={{ minHeight: '100vh' }}>
  <div style={{ height: '32px', background: 'rgba(255,255,255,.2)', margin: '16px'}}/>
  <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
    <Menu.Item key="1">
      <Link to="/helloworld">
        <Icon type="pie-chart" />
        <span>Helloworld</span>
      </Link>
    </Menu.Item>
    <SubMenu
      key="sub1"
      title={<span><Icon type="dashboard" /><span>Dashboard</span></span>}
    >
        <Menu.Item key="2"><Link to="/dashboard/analysis">分析页</Link></Menu.Item>
        <Menu.Item key="3"><Link to="/dashboard/monitor">监控页</Link></Menu.Item>
        <Menu.Item key="4"><Link to="/dashboard/workplace">工作台</Link></Menu.Item>
    </SubMenu>
  </Menu>
</Sider>

页面效果如下:

路由配置

结语

至此我们的 demo 应用现在已经支持了最朴素的路由和布局了。

实际项目中,我们会通过各种方式,优化整个布局和路由的实现过程(比如将导航菜单配置化,抽象出单独的侧边栏组件和顶部导航组件等),但最基本的原理与上面的简单应用是一样的。

那我们的侧边栏导航是不是至此就功能完备了呢?

并没有,实际上还有很多的细节没有实现,比如当页面的url改变后导航要能够根据url路径的不同展开对应的导航菜单等,为了避免大家陷入到细节中,这里不做具体探讨,感兴趣的同学可以参考Ant Design Pro的代码进行深入阅读。

相关文章

感觉本篇文章不错,对你有收获?

¥我要小额赞助,鼓励作者写出更好的教程
80 160 120

作者:

  • 出处: https://www.mi360.cn/articles/164
  • 本文版权归作者,欢迎转载,但未经作者同意必须保留 此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

评论区

最新评论

扫码关注