4. 封装Layout组件

import Nav from './Nav';
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div`
  height: 100vh;
  display: flex;
  flex-direction: column;
`
const Main = styled.div`
  flex-grow: 1;
  overflow: auto;
`
interface Props {
  children: React.ReactNode
}
const Layout = (props: Props) => {
  return (
    <Wrapper>
      <Main>
        {props.children}
      </Main>
      <Nav />
    </Wrapper>
  )
}
export default Layout

• props.children的类型声明为React.ReactNode

将其他所有子组件都封装到views目录

import Layout from '../components/Layout';
import React from 'react';
function Money() {
  return (
    <Layout>
      <h2>记账页</h2>
    </Layout>
  );
}
export default Money;

修复导航栏点击不到图标的问题

将Icon移到Link标签里面

<ul>
  <li>
    <Link to="/tags">
      <Icon name="label" />
      标签
    </Link>
  </li>
  <li>
    <Link to="/money">
      <Icon name="money" />
      记账
    </Link>
  </li>
  <li>
    <Link to="/statistics">
      <Icon name="statistics" />
      统计
    </Link>
  </li>
</ul>

Link元素在页面中实际上是a标签

React-Router的activeStyle

实现点击图标时高亮，使用NavLink的activeStyle或activeClassName属性 参考文档
将Link改为NavLink

<ul>
  <li>
    <NavLink to="/tags" activeClassName="selected">
      <Icon name="label"/>
      标签
    </NavLink>
  </li>
  // ...
</ul>

设置css样式

a.selected {
  color: red;
  .icon {
    fill: red;
  }

使用svgo-loader去除svg的fill属性

修改webpack中的配置如下

{
  test: /\.svg$/,
    use: [
      {loader: 'svg-sprite-loader', options: {}},
      {
        loader: 'svgo-loader', options: {
          plugins: [
            {
              name: 'removeAttrs',
              params: {
                attrs: 'fill'
              }
            }
          ]
        }
      },
    ]
},