umi 会根据页面的目录结构自动给我们生成对应的路由，先在终端，项目所在目录的下面，可以生成一个页面，执行 umi generate 生成一个 page， 放在 dashboard 里面，名字是 index 。 这样访问这个 dashboard 里的 index 页面，地址应该就是 dashboard。

可以再生成一个页面，放在 posts 里面，名字是 index，访问它用的地址就会是 posts 。

回到项目，找到刚才生成的页面，位置是 src，pages ，在 dashboard 目录的下面，有个 index.tsx ，这个组件的视图里面主要就是一个标题，文字可以换成 Dashboard 。

这个 index.css 是这个组件的样式表，去掉它里面的默认的样式。

再打开 pages 目录下面的 index ，修改一下视图上的大标题文字，换成 posts ，然后打开这个页面的样式表，去掉里面的默认的样式。

路由

umi 自动根据这个 pages 里的目录结构生成对应的路由，访问 dashboard 地址，打开的就会是这个 index 页面。访问 posts 的时候，打开的是 posts 目录下面的 index 。

下面可以打开 src，layouts 里的 index 。 先在文件的顶部导入一个组件，import 的是 Link ，这个东西来自 umi/link。

找到这个布局里的边栏，在 Dashboard 这个菜单项目里面，可以添加一个链接。用一组 Link 组件，包装一下菜单项目里的内容。

然后在这个 Link 上面添加一个 to 属性，设置一下链接的地址，设置成 /dashboard。

再找到下面的菜单，在这个 Popular 菜单项目的周围，用一组 Link 包装一下，地址放在 to 属性里面，设置成 /posts 。

应用首页的地址是 / ，在边栏上的标志的周围，再用一组 Link 组件包装一下， 它的 to 属性的值应该设置成 / ，表示应用的根。

预览

回到浏览器可以预览一下。 点击边栏上的 Dashboard，打开的就是 pages，dashboard 目录下面的 index 页面。

再打开 Discover 下面的 Popular，地址是 /posts，页面上显示的就会是 pages，posts 目录下面的 index 页面。

再点击这个标志，链接的地址是应用的根。

样式

现在主体上显示的内容会紧挨着边栏还有头部，可以给它添加点边距，回到项目，先找到 Content ，在它上面添加 className ，用一下 styles 里的 content。

然后打开这个布局的样式表，里面添加一个 .content ，里面可以使用 padding 添加点内边距，大小是 24px 。

再回到浏览器，预览一下。