一，实现效果

二，实现过程

1，这篇文章的前四步：

https://blog.csdn.net/weixin_42349568/article/details/116567355

2，引入react-router-dom

npm install --save react-router-dom

3,使用路由

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Switch, Route } from 'react-router-dom'
import Shici from './pages/shici/shici.jsx'
import Login from './pages/login/login.jsx'
import Home from './pages/home/home.jsx'ReactDOM.render(<div><div></div><HashRouter><Switch><Route path="/404" component={Shici}></Route><Route path="/login" component={Login}></Route><Route component={Home}></Route></Switch></HashRouter></div>,document.getElementById('root')
)

并且新建了三个页面组件：

4，登陆页面

import React from 'react'
import { createForm } from 'rc-form';
import BasicInputExample from '../../components/inputItem/inputItem'
import {Button} from 'antd-mobile'
import './login.less'
import imgUrl from './logo.jpg'
const BasicInputExampleWrapper = createForm()(BasicInputExample);
export default class Xiaohua extends React.Component{render(){return (<div><div className="imgBox"><img src={imgUrl} alt=""/></div><BasicInputExampleWrapper></BasicInputExampleWrapper><div className="btnBox"><Button type="ghost" className="myBtn">注册</Button><Button type="primary" className="myBtn" onClick={() => this.props.history.push({pathname:'/home'})}>登陆</Button></div></div>)}
}

1，因为this.props.history存在（调用login组件时给了path属性），所以跳转到home页面可以使用this.props.history.push({pathname:'/home'})
2，图片的引入，不能像html中那样写，而是应该使用变量方式写了。
3，样式的修改，可以直接添加类名，然后引入less文件来完成

5，首页的书写

import React from 'react'
import Tabbar from '../../components/tabbar/tabbar'
export default class Meitu extends React.Component{render(){return (<div><Tabbar></Tabbar></div>)}
}

利用的是antd-mobile的组件修改来的：

import React from 'react'
import { TabBar } from 'antd-mobile'
import {NavLink} from 'react-router-dom'
import './tabbar.less'export default class TabBarExample extends React.Component {constructor(props) {super(props)this.state = {selectedTab: 'redTab',hidden: false,fullScreen: true,}}renderContent(pageText) {switch (pageText) {case 'Life':return (<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}><div style={{ paddingTop: 50 }}>生活界面内容</div></div>);case 'Koubei':return (<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}><div style={{ paddingTop: 50 }}>口碑界面内容</div></div>);case 'Friend':return (<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}><div style={{ paddingTop: 50 }}>朋友界面内容</div></div>);case 'My':return (<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}><div style={{ paddingTop: 50 }}><NavLink exact to="/login" className='goBack' activeStyle={{fontWeight: 'bold'}}>退出登陆</NavLink></div></div>);default:break}}render() {return (<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}><TabBar unselectedTintColor="#949494" tintColor="#33A3F4" barTintColor="white" hidden={this.state.hidden}><TabBar.Itemtitle="life"key="Life"icon={<divstyle={{ width: '22px',height: '22px',background:'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',}}/>}selectedIcon={<divstyle={{width: '22px',height: '22px',background:'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat',}}/>}selected={this.state.selectedTab === 'blueTab'}badge={2}onPress={() => {this.setState({selectedTab: 'blueTab',})}}data-seed="logId">{this.renderContent('Life')}</TabBar.Item><TabBar.Itemicon={<divstyle={{width: '22px',height: '22px',background:'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat',}}/>}selectedIcon={<divstyle={{width: '22px',height: '22px',background:'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat',}}/>}title="Koubei"key="Koubei"badge={23}selected={this.state.selectedTab === 'redTab'}onPress={() => {this.setState({selectedTab: 'redTab',})}}data-seed="logId1">{this.renderContent('Koubei')}</TabBar.Item><TabBar.Itemicon={<divstyle={{width: '22px',height: '22px',background:'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat',}}/>}selectedIcon={<divstyle={{width: '22px',height: '22px',background:'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat',}}/>}title="Friend"key="Friend"dotselected={this.state.selectedTab === 'greenTab'}onPress={() => {this.setState({selectedTab: 'greenTab',})}}>{this.renderContent('Friend')}</TabBar.Item><TabBar.Itemicon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}title="My"key="my"selected={this.state.selectedTab === 'yellowTab'}onPress={() => {this.setState({selectedTab: 'yellowTab',})}}>{this.renderContent('My')}</TabBar.Item></TabBar></div>)}
}

1，这时候跳转路由的实现就是使用：
<NavLink exact to="/login" className='goBack' activeStyle={{fontWeight: 'bold'}}>退出登陆</NavLink></div>

三，项目地址

https://gitee.com/ling-xu/react-spa

react-spa小demo相关推荐

使用 React 开发小程序
作者 | 边柳原文 | https://www.yuque.com/seeconf/2020/qsytho 为什么要用 React 开发小程序大家知道微信小程序在商业上取得了非常大的成功,正是因为 ...
React 转小程序现状
(点击上方公众号,可快速关注) 作者:司徒正美 zhuanlan.zhihu.com/p/41144332 现在做React转小程序,一个是taro,一个是anujs. anujs的React小程序一 ...
前端面试题（HTML、JS、Vue、React、小程序）
前端面试题 HTML && CSS HTML 1.Div 里面有个一个div ***** Q:有几种方法可以水平,垂直居中 2.doctype的作用 * 3.link标签和import ...
mess-cli的一个小DEMO，微服务脚手架的实践！
介绍 mess-cli是一个基于single-spa进行封装了的微服务脚手架,它为你提供了react.vue项目的single-spa模板不了解mess-cli的,可以参考mess-cli官网,或者 ...
React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
React.js 小书 Lesson14 - 实战分析：评论功能（一）
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
React.js 小书 Lesson27 - 实战分析：评论功能（六）
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...
金融新手投标模块布局小Demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
android jsoup简书,jsoup爬虫简书首页数据做个小Demo
昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固,比如java反射注解,知道一点就是说不出来,很尴尬... 生命不止,学习不止啊之前那个项目 Q ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...

react-spa小demo

一，实现效果

二，实现过程

1，这篇文章的前四步：

2，引入react-router-dom

3,使用路由

4，登陆页面

5，首页的书写

三，项目地址

react-spa小demo相关推荐

最新文章

热门文章