react routing (v5 version): mobile terminal bottom navigation

react路由（v5版本）: Mobile bottom navigation

​ The use of iconfont:

​ 1. Search for the iconfont icon, add it to the shopping cart, and click the download code button below;

2. After decompression, find iconfont.css, put it into the corresponding css folder, and modify the src path in the css file to the current path;

​ 3. Find iconfont.ttf and put it into the corresponding font folder;

4. Introduce the iconfont.css file into the component that uses the iconfont icon;

5. Write the corresponding class name where the icon is needed.

一、准备工作：

1. Create the myProject05-router directory

​ 2. Create a manifest file, npm init -y

3. Install third-party dependent packages, npm install react react-dom react-scripts react-router-dom@5 --save

​ 4. Create a public folder, and create index.html under this folder

5. Create a src folder and create it under this folder:

​ (1) Entry file index.js

​ (2) Component App.js and App.css files

​ (3) assets folder, used to store fonts, font styles, etc.

​ (4) Create a css folder under the assets folder to store style files; create a font folder to store font files

​ (5) In the assets-css folder, place the iconfont.css file, and modify the src path in the css file, as shown in the figure:

​ (6) In the assets-font folder, place the iconfont.ttf file

(7) Create a pages folder for storing pages

6. Project catalog:

​

二、编写代码：

​ 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

You can also set a shorthand command in the manifest file: "start": "react-scripts start"

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

Run the command:`

​ npm react-scripts start

You can also set a shorthand command in the manifest file: "start": "react-scripts start"

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