react 结合react-router-dom， react-

下载需要的包文件
npm i react-router-dom react-dom redux-thunk redux react-redux -D

p首页index.js的东西， createStore 创建1个redux 放入需要维护的全局数据counter，redux-thunk是让react支持异步操作, react-redux里面的Provider是需要包含所有节点，实现数据的共享，让需要用到数据的路由通过 import {connect} from 'react-redux' 里面的connect来获取Provider共享的数据

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk' // 异步
import {Provider} from 'react-redux'
import {counter} from './index.redux'

// 这个是让数据生效，和结合谷歌插件的代码
const store = createStore(counter,
    compose(
        applyMiddleware(thunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
)
ReactDOM.render(
    (<Provider store={store}>
        <App/>
    </Provider>)
    , document.getElementById('root'))

全部路由的app组件，在上面js里面的app.js的那个app组件

import React, {Component} from 'react'
import {BrowserRouter, HashRouter, Switch, Router, Route} from 'react-router-dom'
// test1
import Test1 from './view/test1'
// test2
import Test2 from './view/test2'
class App extends Component {
    render() {
        return (
            <HashRouter>
                <div id='app'>
                    <Switch>                      
                        <Route path="/login" component={Test1}/>
                        <Route path="/register" component={Test2}/>
                        {/*如果没有path就每个页面都用这个组件，但是用Switch包住就可以上面没匹配到到才走这个路由*/}
                        {/*<Route component={Dashboard}/>*/}
                    </Switch>
                </div>
            </HashRouter>
        )
    }
}
export default App

import {counter} from './index.redux' 是这个js文件，1个简单的共享数据js

// 新建store
const ADD_GUN = '加'
const ADD_DEL = '减'

// 根据老的state和action 生成新的state
export function counter(state = 0, action) {
    switch (action.type) {
        case ADD_GUN:
            return state + 1
        case ADD_DEL:
            return state - 1
        default:
            return 10
    }
}

export function addGum() {
    return {type: ADD_GUN}
}

export function addDel() {
    return {type: ADD_DEL}
}

// 异步函数增加
export function addGumAsync() {
    return dispatch => {
        setTimeout(() => {
            dispatch({type: ADD_GUN})
        }, 2000)
    }
}
// 异步函数减少
export function addDelAsync() {
    return dispatch => {
        setTimeout(() => {
            dispatch({type: ADD_DEL})
        }, 2000)
    }
}

放出1个路由里面用store里面的数据代码这里就是结合上面的 import {connect} from 'react-redux' 用react-redux里面的connect拿到数据和方法，Provider是广播全局的重要

import React, {Component} from 'react'
import {Button} from 'antd-mobile'
import {connect} from 'react-redux'
import {addGum, addGumAsync} from "../index.redux";
class Test1 extends Component {
    render() {
        let num = this.props.num
        return (
            <div className="test01">
                <p>{num}</p>
                <Button onClick={this.props.addGum}>add</Button>
                <Button onClick={this.props.addGumAsync}>延迟增加</Button>
            </div>
        )
    }
}
// 获得数据
import React, {Component} from 'react'
import {Button} from 'antd-mobile'
import {connect} from 'react-redux'
import {addGum, addGumAsync} from "../index.redux";

class Test1 extends Component {
    render() {
        let num = this.props.num
        return (
            <div className="test01">
                <p>{num}</p>
                <Button onClick={this.props.addGum}>add</Button>
                <Button onClick={this.props.addGumAsync}>延迟增加</Button>
            </div>
        )
    }
}
// 获得数据
const mapStateToProps = (state) => {
    return {num: state}
}
// 获得方法,方法是上面倒入的 //将action的所有方法绑定到props上
const mapDispatchToProps = {addGum, addGumAsync}
// connect 第一个是获得数据源，第二个是获得方法源
Test1 = connect(mapStateToProps, mapDispatchToProps)(Test1)
export default Test1