`react路由（v5版本）`：移动端底部导航

iconfont的使用：

1、搜索iconfont图标，添加至购物车，点击下方的下载代码按钮；

2、解压后，找到iconfont.css，放入对应的css文件夹，并修改css文件里的src路径为现在的路径；

3、找到iconfont.ttf，放入对应的font文件夹；

4、在用到iconfont图标的组件中引入iconfont.css文件；

5、在需要图标的位置写上对应的类名。

`一、准备工作：`

1、创建myProject05-router目录

2、创建清单文件， npm init -y

3、安装第三方依赖包，npm install react react-dom react-scripts react-router-dom@5 --save

4、创建public文件夹，在该文件夹下创建index.html

5、创建src文件夹，在该文件夹下创建：

（1）入口文件index.js

（2）组件App.js和App.css文件

（3）assets文件夹，用于存放字体、字体样式等

（4）在assets文件夹下创建css文件夹，用于存放样式文件；创建font文件夹，用于存放字体文件

（5）在assets-css文件夹中，放置iconfont.css文件，并修改css文件中的src路径，如图所示：
请添加图片描述

（6）在assets-font文件夹中，放置iconfont.ttf文件

（7）创建pages文件夹，用于存放页面

6、工程目录：

请添加图片描述

`二、编写代码：`

1、index.html：

    <div id="root"></div>

2、index.js：

import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)

3、App.js：

import React, { Component } from 'react'
import { Redirect, Route, Switch, NavLink } from 'react-router-dom'
import Home from './pages/Home'
import Shop from './pages/Shop'
import Life from './pages/Life'
import My from './pages/My'
import './assets/css/iconfont.css'
import './App.css'

export default class App extends Component {
  render() {
    return (
      <div className='app'>
        {/* 底部导航部分 */}
        <div className='footer-nav'>
          <NavLink className='item' to='/home'>
            <i className='iconfont icon-home'></i>
            <span>首页</span>
          </NavLink>
          <NavLink className='item' to='/shop'>
            <i className='iconfont icon-shop' ></i>
            <span>商城</span>
          </NavLink>
          <NavLink className='item' to='/life'>
            <i className='iconfont icon-life'></i>
            <span>生活服务</span>
          </NavLink>
          <NavLink className='item' to='/my'>
            <i className='iconfont icon-my'></i>
            <span>我的</span>
          </NavLink>
        </div>

        {/* 内容区 */}
        <Switch>
          <Route path='/home' component={Home} />
          <Route path='/shop' component={Shop} />
          <Route path='/life' component={Life} />
          <Route path='/my' component={My} />
          <Redirect to='/home' />
        </Switch>



      </div>
    )
  }
}

4、App.css：

* {
    
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.footer-nav {
    
     
    display: flex;
    flex-direction: rows;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px 0;
}

.footer-nav .item {
    
    
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
}

.footer-nav .item.active {
    
    
    color: #e05454;
}

.footer-nav .item .iconfont {
    
    
    font-size: 24px;
}

5、Home.jsx：

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>这是首页的页面内容</div>
    )
  }
}

6、Life.jsx：

import React, { Component } from 'react'

export default class Life extends Component {
  render() {
    return (
      <div>这是生活服务的页面内容</div>
    )
  }
}

7、Shop.jsx：

import React, { Component } from 'react'

export default class Shop extends Component {
  render() {
    return (
      <div>这是商城的页面内容</div>
    )
  }
}

8、my.jsx：

import React, { Component } from 'react'

export default class My extends Component {
  render() {
    return (
      <div>这是我的页面的内容</div>
    )
  }
}

`三、运行命令：`

npm react-scripts start

也可以在清单文件中设置简写命令：“start”: “react-scripts start”

 "scripts": {
    
    
    "start": "react-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

运行命令：`

npm react-scripts start

也可以在清单文件中设置简写命令：“start”: “react-scripts start”

 "scripts": {
    
    
    "start": "react-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },