react-spa小demo

一，实现效果

二，实现过程

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.Item
						title="life"
						key="Life"
						icon={
							<div
								style={{ 
									width: '22px',
									height: '22px',
									background:
										'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						selectedIcon={
							<div
								style={{
									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.Item
						icon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						selectedIcon={
							<div
								style={{
									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.Item
						icon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						selectedIcon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						title="Friend"
						key="Friend"
						dot
						selected={this.state.selectedTab === 'greenTab'}
						onPress={() => {
							this.setState({
								selectedTab: 'greenTab',
							})
						}}
					>
						{this.renderContent('Friend')}
					</TabBar.Item>
					<TabBar.Item
						icon={{ 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