react路由详细介绍、flux了解

一.路由

1.路由模式

• HashRouter

  • HashRouter  访问 http://localhost:3000/#/
    ReactDOM.render(
        <HashRouter>
             <App />
        </HashRouter>
       ,
        document.getElementById('root')
    );
    
    

• BrowserRouter

  • BrowserRouter 访问 http://localhost:3000/
    ReactDOM.render(
        <BrowserRouter>
             <App />
        </BrowserRouter>
       ,
        document.getElementById('root')
    );
    

2.路由规则

• 路由出口

  • import {Switch,Route,Redirect} from 'react-router-dom'
    <Switch></Switch>
    

• 路由规则

  • import {Switch,Route,Redirect} from 'react-router-dom'
    <Switch>
            <Route path="/login" component={Login}></Route>
            <Route path="/index" component={Index}></Route>
            <Route path="/movie" component={Movie}></Route>
            <Route path="/movieDetail" component={MovieDetail}></Route>
            <Route path="/food" component={Food}></Route>
            <Route path="/foodDetail" component={FoodDetail}></Route>
            <Redirect to="/login"></Redirect>
     </Switch>
    

• 路由重定向

  • import {Switch,Route,Redirect} from 'react-router-dom'
    <Switch>
            <Redirect to="/login"></Redirect>
     </Switch>
    

3.路由页面跳转

• Link

  • import {Link} from 'react-router-dom'
    <Link to="/index">首页</Link>
    <Link to="/movie">电影</Link>
    <Link to="/food">美食</Link>
    

• NavLink

  •  import {NavLink} from 'react-router-dom'
     <NavLink to="/index/home" activeClassName="select">首页</NavLink>
     <NavLink to="/index/order" activeClassName="select">订单</NavLink>
     <NavLink to="/index/mime" activeClassName="select">我的</NavLink>
    

  • 做选中的样式

  • 使用activeClassName属性做选中样式操作
    

4.编程式导航

• push

  • this.props.history.push('/movie')
    

• replace

  • this.props.history.replace(url)
    

• go

  •   this.props.history.go(-1);
    

• goBack

  •   this.props.history.goBack();
    

• forWard

  •  this.props.history.forWard();
    

5.路由组件和普通组件的区别

• 路由组件

  • 使用Route包裹起来的组件,就是路由组件
    

• 普通组件

  • 没有被Route包裹起来的组件,是普通组件.
    如果要使普通组件变成路由组件?
    	使用withRouter进行包裹即可/
    

6.路由传参

• :传参

  • 1.在路由配置规则中将路径进行修改为:
    	 <Route path="/movieDetail/:id" component={MovieDetail}></Route>
    2. {/* 方式二:列表展示 使用Link */}
                    {movieList.map(item=>(
                        <div key={item.id} style={{background:'green'}}>
                            <Link  style={{color:'white'}} to={'/movieDetail/'+item.id}>电影名称为:{item.name}</Link>
                        </div>
                    ))}
                    
    3.接收参数
    	this.props.match.params.id
    

• ?传参

  • <ul>
        {foodList.map(item=>(
        <li onClick={()=>this.toDetail(item.id)} style={{background:'aqua'}} key={item.id}>美食名称为:{item.name}</li>
        ))}
    </ul>
    toDetail(id){
        this.props.history.push('/foodDetail?id='+id)
    }
    
    接收参数
    	 // 方式一
            let search = this.props.location.search;// ?id=1&name=aaa&age=20
            let sear = search.slice(1);//id=1&name=aa&age=20
            let arr = sear.split('&');//['id=1','name=aa','age=20']
            let result = {};
            arr.forEach(item=>{
                let aa = item.split('=');//[id,1] [name,aa]  [age,20]
                result[aa[0]] = aa[1];//result = {id:1}
            })
    
            // 方式二
            let result = querystring.parse(this.props.location.search.slice(1))
    

7.路由守卫（需要自己封装）

import React, { Component } from 'react'
import {Route,Redirect} from 'react-router-dom'
export default class MyRoute extends Component {
    render() {
        // console.log(this.props);
        const user = sessionStorage.getItem('user');
        return (
            <div>
                {user ? <Route {...this.props}></Route> : <Redirect to="/login"></Redirect>}
            </div>
        )
    }
}

8.懒加载

需要自己封装

utils/asyncComponents.js
import React, { Component } from 'react'
// 参数fn是一个方法
function asyncComponents(fn){
    class ZuJian extends Component {
        constructor(){
            super()
            this.state = {
                Obj:''
            }
        }
        componentDidMount(){
            // console.log(fn());
            fn().then(mode=>{
               this.setState({Obj:mode.default})
            })
        }
        render() {
            const {Obj} = this.state
            return (
                <div>
                    {Obj ? <Obj {...this.props}></Obj> : null}
                </div>
            )
        }
    }
    return ZuJian
    
}

export default asyncComponents

App.jsx
import asyncComponents from './utils/asyncComponents'

const Login = asyncComponents(()=>import('./pages/Login/Login'));
const Index = asyncComponents(()=>import('./pages/Index/Index'));
const Movie = asyncComponents(()=>import('./pages/Movie/Movie'));
const MovieDetail = asyncComponents(()=>import('./pages/MovieDetail/MovieDetail'));
const Food = asyncComponents(()=>import('./pages/Food/Food'));
const FoodDetail = asyncComponents(()=>import('./pages/FoodDetail/FoodDetail'));

9.项目打包

npm run build

二.flux(了解)

Flux应用有三个主要部分：Dispatcher调度 、存储Store和视图View(React 组件)

Flux是以单向数据流方式支持MVC

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ID47CxfK-1616808134677)(C:\Users\Administrator\Desktop\web1102\day18-react路由\flux2.png)]

安装

cnpm i flux --save

使用:

• store(仓库)

  • // 存放状态数据
    import ee from './events'
    const store = {
        // 声明一个状态数据
        state:{
            num:0,
        },
    
        // 添加
        addNum(){
            this.state.num += 1;
            ee.emit('message',this.state);
            // console.log(this.state.num);
        },
        //减少
        minusNum(){
            this.state.num -= 1;
            ee.emit('message',this.state);
        }
    }
    
    export default store;
    
    

• Dispatcher(调度)

  • // 导出一个构造函数Dispatcher
    import {Dispatcher} from 'flux';
    import store from './store'
    // 实例化dispatcher调度
    const dispatcher = new Dispatcher() 
    
    // 在dispatcher有一个方法register
    // register中需要传递一个方法
    
    // action:{type:'add',data:''}
    dispatcher.register(function(action){
        switch(action.type){
            case 'add':
                // 添加
                store.addNum()
                break;
            case 'minus':
                //减少
                store.minusNum()
                break;
            default:
                break;
        }
    })
    
    
    export default dispatcher;
    

• view(组件视图)

  • import React, { Component } from 'react'
    import store from '../../utils/store'
    import dispatcher from '../../utils/dispatcher'
    import ee from '../../utils/events'
    export default class Order extends Component {
        render() {
            // console.log(store);
            // console.log(dispatcher);
            const {num} = store.state;
            console.log(store.state);
            ee.on('message',(e)=>{
                this.setState(e)
            })
            // console.log(num);
            return (
                <div>
                    {num}
                    <div>
                    <button onClick={()=>this.add()}>添加</button>
                    <button onClick={()=>this.minus()}>减少</button>
                    </div>
                </div>
            )
        }
    
        add(){
            const action = {type:'add'};
            dispatcher.dispatch(action)
        }
        minus(){
            const action = {type:'minus'}
            dispatcher.dispatch(action)
        }
    }