一、项目初始化

1. 安装与运行

构建项目：yarn create react-app my-app
启动：yarn start
当然也可以使用npm：

• 全局安装：npm install -g create-react-app
• 构建项目：npx create-react-app my-app
• 启动：npm start

2.安装路由依赖

在项目中执行：npm install react-router-dom --save

3.在App.js中引入router

由于简单演示，就不单独对router进行封装了。
安装完成后，我们在App.js中引入路由相关组件BrowserRouter、Route、Switch、Redirect
在顶部引入：import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
详细代码如下：

import React, { Component } from 'react';
import Home from '@/views/home'
import Study from '@/views/study'
import Type from '@/views/type'
import Label from '@/views/label'
import About from '@/views/about'
import { Layout } from 'antd'
import Header from '@/components/Header'
import Persional from '@/components/Persional'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
const { Footer, Content, Sider} = Layout;
// 导入子组件
class App extends Component {
  render() {
    return (
      <div className="App" >
        <Layout>
          <Sider>
            <Persional />
          </Sider>
          <Content>
            <Router>
              <Header />
              <Switch>
                <Route path="/home" exact component={Home}></Route>
                <Route path="/study" component={Study}></Route>
                <Route path="/type" component={Type}></Route>
                <Route path="/label" component={Label}></Route>
                <Route path="/about" component={About}></Route>
                <Redirect from="/*" to="/home"></Redirect>
              </Switch>
              <Footer>Footer</Footer>
            </Router>
          </Content> 
        </Layout>
      </div>
    );
  }
}

export default App;

这里用到了antd的Layout布局组件进行布局
首先我们将我们的视图组件引入进来（import Home from '@/views/home'），并在Route标签中配置：（以home为例）<Route path="/home" exact component={Home}></Route>

4.编写Header头部导航组件

在components目录下新建Header目录，并在其目录下新建index.js及index.scss文件，这里使用scss进行编写。
安装命令：

npm install node-sass --save-dev 
npm install sass-loader --save-dev

为了实现导航栏状态与地址联动，关键是要实现组件初始化时的处理逻辑，也就是组件挂载的时候，即在生命周期函数componentDidMount中实现。
要实现以下两点：

• 修改当前地址对应导航栏状态
• 监听浏览器前进后退，即监听history对象
  关键代码如下：

  componentDidMount = () => {
      let moren = this.props.location.pathname
      let text = moren.substring(moren.lastIndexOf('/') + 1, moren.length)
      // 当访问的目录不在这个数组里时候，当前状态是home，即重定向到home页面
      !['home', 'study', 'type', 'label', 'about', 'search'].includes(text) && (text = 'home')
      this.setState({
        current: text
      })
      // 监听history变化
      history.listen((event) => {
        let test = event.pathname
        let text = test.substring(test.lastIndexOf('/') + 1, test.length)
        this.setState({
          current: text
        })
      })
    }

  组件完整代码如下：
  index.js:

  import React, { Component }  from 'react';
  import { Row, Col, Menu  } from 'antd';
  import { Link, withRouter } from 'react-router-dom'
  import { HomeOutlined, FolderOpenOutlined, AppstoreOutlined, PushpinOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
  import './index.scss'
  import { createBrowserHistory } from 'history';
  const history = createBrowserHistory() // history模式
  
  class Header extends Component {
    constructor(props) {
      super(props);
      this.state = {
        logo: '',
        current: 'home'
      }
    }
    handleClick = e => {
      this.setState({ current: e.key });
    }
    componentDidMount = () => {
      let moren = this.props.location.pathname
      let text = moren.substring(moren.lastIndexOf('/') + 1, moren.length)
      !['home', 'study', 'type', 'label', 'about', 'search'].includes(text) && (text = 'home')
      this.setState({
        current: text
      })
      history.listen((event) => {
        let test = event.pathname
        let text = test.substring(test.lastIndexOf('/') + 1, test.length)
        this.setState({
          current: text
        })
      })
    }
    render() {
      const { current } = this.state;
      return(
        <div className="header-wrapper">
           <Row>
            <Col span={18} push={6} className="right-box">
              <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
                <Menu.Item key="home" icon={<HomeOutlined />}>
                  <Link to="/home">首页</Link>
                </Menu.Item>
                <Menu.Item key="study" icon={<FolderOpenOutlined />}>
                  <Link to="/study">学习</Link>
                </Menu.Item>
                <Menu.Item key="type" icon={<AppstoreOutlined />}>
                  <Link to="/type">分类</Link>
                </Menu.Item>
                <Menu.Item key="label" icon={<PushpinOutlined />}>
                  <Link to="/label">标签</Link>
                </Menu.Item>
                <Menu.Item key="about" icon={<UserOutlined />}>
                  <Link to="/about">关于</Link>
                </Menu.Item>
                <Menu.Item key="search" icon={<SearchOutlined />}>
                  搜索
                </Menu.Item>
              </Menu>
            </Col>
            <Col span={6} pull={18} className="left-box">
              <strong className="logo-name">Deng</strong>
            </Col>
          </Row>
        </div>
      )
    }
  }
  export default withRouter(Header)

  注意：为了能够拿到this.props.location.pathname,需要使用withRouter处理组件，并把Header组件放在BrowserRouter标签中。
  这样就能够实现导航栏状态与地址绑定了