添加页面导航

./src/layouts/index.tsx

  1. <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} style={{ lineHeight: '64px' }}>
  2.   <Menu.Item key="1">英雄</Menu.Item>
  3.   <Menu.Item key="2">局内道具</Menu.Item>
  4.   <Menu.Item key="3">召唤师技能</Menu.Item>
  5. </Menu>

在全局布局那一小节里面，我们为页面增加了导航组件，这小节，我们就来处理如何导航到页面。

umi 提供了两种导航到页面的能力，一种是命令式（使用 history.push('/list') ），一种是声明式（使用 <Link to="/list">Go to list page</Link> ）。

命令式的用法，在后续章节中体现，这里使用声明式。

  1. + import Link from 'umi/link';
  2. ...
  3. <Menu ...>
  4.   <Menu.Item key="1">
  5. +   <Link to="hero">英雄</Link>
  6.   </Menu.Item>
  7.   <Menu.Item key="2">
  8. +   <Link to="item">局内道具</Link>
  9.   </Menu.Item>
  10.   <Menu.Item key="3">
  11. +   <Link to="summoner">召唤师技能</Link>
  12.   </Menu.Item>
  13. </Menu>;

导航到页面 - 图1

使导航和路由一致

从效果来看，基本上已经实现了导航到页面的功能了，但是，你注意看一下，当页面刷新时，被选中的tab和当前的路由不一致。因为 Menu 的的属性：

  1. defaultSelectedKeys={['1']}

你刷新就选中的是 key 为 1 的 tab ，因此我们应该通过当前路由来编辑这个值：

  1. function BasicLayout(props) {
  2. +  //从属性中取出当前的路由
  3. +  const location = props.location;
  4. +  const pathname = location.pathname;
  5.   return (
  6. ...
  7. <Menu
  8.   theme="dark"
  9.   mode="horizontal"
  10. + defaultSelectedKeys={[pathname]}
  11.   style={{ lineHeight: '64px' }}
  12. >
  13. + <Menu.Item key="/hero">
  14.     <Link to="hero">英雄</Link>
  15.   </Menu.Item>
  16. + <Menu.Item key="/item">
  17.     <Link to="item">局内道具</Link>
  18.   </Menu.Item>
  19. + <Menu.Item key="/summoner">
  20.     <Link to="summoner">召唤师技能</Link>
  21.   </Menu.Item>
  22. </Menu>

修改完保存，你再刷新页面，就不会出现刚才的问题了。

修改代码结构

为了使代码更干净，更加易于维护，我们把 Menu 的数据整理出来，当作 menuData。最终我们的布局文件如下：

  1. import styles from './index.css';
  2. import { Layout, Menu } from 'antd';
  3. import Link from 'umi/link';
  4. const { Header, Content, Footer } = Layout;
  5. + const menuData = [
  6. +  { route: '/hero', name: '英雄' },
  7. +  { route: '/item', name: '局内道具' },
  8. +  { route: '/summoner', name: '召唤师技能' },
  9. +];
  10. +
  11. function BasicLayout(props) {
  12. +  const {
  13. +    location: { pathname },
  14. +    children,
  15. +  } = props;
  17.   return (
  18.     <Layout>
  19.       <Header>
  20.         <div className={styles.logo}>王者荣耀资料库 </div>
  21.         <Menu
  22.           theme="dark"
  23.           mode="horizontal"
  24.           defaultSelectedKeys={[pathname]}
  25.           style={{ lineHeight: '64px' }}
  26.         >
  27. +          {menuData.map(menu => (
  28. +            <Menu.Item key={`/${menu.route}`}>
  29. +              <Link to={menu.route}>{menu.name}</Link>
  30. +            </Menu.Item>
  31. +          ))}
  32.         </Menu>
  33.       </Header>
  34.       <Content style={{ padding: '0 50px' }}>
  35. +        <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>{children}</div>
  36.       </Content>
  37.       <Footer style={{ textAlign: 'center' }}>Umi 入门教程 Created by xiaohuoni</Footer>
  38.     </Layout>
  39.   );
  40. }
  42. export default BasicLayout;

这样子修改完，从功能上，并没有任何差别。