react的移动端项目

实现效果

1.安装和初始化

$ npm install -g create-react-app# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app$ cd my-app
$ npm start

2.安装有关插件

1.安装sassnpm install sass --D2, 安装  redux routernpm install redux react-redux react-router-dom redux-thunk --save

3.创建文件夹

1） src-pages 存储页面
2）components 公共组件
3）layout 模板

4. layout —>Layout.js 模板

import React from 'react'
import BottomNav from "./components/BottomNav"const Layout=(props)=> {//  console.log(props,'props===================')const  {children}=props;return (<div>{children}<BottomNav></BottomNav></div>)
}
export default Layout```js
在home等页面最外层包围Layout```jsimport React from 'react'
import Layout from "../../layout/Layout"
export default function Home() {return (<Layout>home页面</Layout>)
}

5.最下面导航栏的封装layout—>components–>BottomNav—>index.js

Icon 要在App文件导入

import React from 'react'
import "./index.scss"
const menu = [{title: '首页',icon: 'shouye',link: '/',},{title: '分类',icon: 'fenlei',link: '/search',},{title: '发现',icon: 'wode',link: '/user',},{title: '我的',icon: 'wode',link: '/user',}]const BottomNav=(props)=> {return (<ul className="bottomNav">{menu.map((item)=>{return (<MenuItem key={item.title} {...item}/>)})}</ul>)
}
export default BottomNav
function MenuItem(props){return (<li><span className={"iconfont icon-"+props.icon}></span><a href={props.link}>{props.title}</a></li>)
}

5.rem 适配 App文件导入

src同级：lib–>flexible.js

6. 路由

pages同级Router–index.js

import React from 'react'
import { BrowserRouter, Route, Switch } from "react-router-dom";function Router(props) {return (<Switch><Route exact path="/" component={Home}></Route><Route path="/find" component={Find}></Route><Route path="/sort" component={Sort}></Route><Route path="/my" component={My}></Route><Route component={_404}></Route></Switch >)
}
export default Router

》App引入Router文件

import React from 'react';
import { BrowserRouter } from "react-router-dom";
import './App.css';
// import Home from "./pages/Home"
import "./static/iconfont/iconfont.css" 
import './lib/flexible'
import Router from './Router';
function App() {return (<BrowserRouter> <Router /></BrowserRouter>);
}export default App;

》此时的页面样式

7. Layout–>BottomNav–>index.js

	import React from 'react'
import "./index.scss"
import {Link} from "react-router-dom"
const menu = [{title: '首页',icon: 'shouye',link: '/',},{title: '分类',icon: 'fenlei',link: '/sort',},{title: '发现',icon: 'wode',link: '/find',},{title: '我的',icon: 'wode',link: '/my',}]const BottomNav=(props)=> {return (<ul className="bottomNav">{menu.map((item)=>{return (<MenuItem key={item.title} {...item}/>)})}</ul>)
}
export default BottomNav
function MenuItem(props){return (<li><span className={"iconfont icon-"+props.icon}></span><Link to={props.link}>{props.title}</Link></li>)
}`

》此时可以实现切换导航到切换对应页面

8. 路由守卫，没有登录，不能进入首页

在Router–>建一个PrivateRoute.js

import React, { Component } from 'react'
import { Route, Redirect } from "react-router-dom";
import {connect} from "react-redux"
class PrivateRoute extends Component {render() {const { isLogin,path,component,location } = this.propsif(isLogin){// 登录return  <Route path={path} component={component} />}return (// 没有登录<Redirect to={{pathname: '/login',state:{redirect:location.pathname}}} />    )}
}
// 参数
const mapStateToProps=({my})=>{return {isLogin:my.isLogin}
}
// 事件
const mapDispatchToprops=(dispatch)=>{return {}
}
export default connect(mapStateToProps,mapDispatchToprops)(PrivateRoute)

没有登录跳转到login 页面

import React from 'react'
import Layout from "../../../layout/Layout"
import {connect} from "react-redux" 
import {  Redirect } from "react-router-dom";
import actionCreators from "../store/actionCreators"function Login(props) {const {isLogin,doLogin,location}=propsif(isLogin){// 登录const redirect = (location && location.state && location.state.redirect) || "/"return  <Redirect  to={redirect}/>}return (<Layout><div className="login" >登录页面<button onClick={doLogin}>登录</button></div></Layout>)
}
// 参数
const mapStateToProps=({my})=>{return {isLogin:my.isLogin}}// 事件const mapDispatchToprops=(dispatch)=>{return {doLogin(){const action=actionCreators.loginSuccess();dispatch(action)}}}
export default connect(mapStateToProps,mapDispatchToprops) (Login)

》点击灯枯后跳转到my页面，此外这个项目需要store的使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！