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>
)
}
}
三、运行命令:
也可以在清单文件中设置简写命令:“start”: “react-scripts start”
"scripts": {
"start": "react-scripts start",
"test": "echo \"Error: no test specified\" && exit 1"
},
运行命令:`
也可以在清单文件中设置简写命令:“start”: “react-scripts start”
"scripts": {
"start": "react-scripts start",
"test": "echo \"Error: no test specified\" && exit 1"
},