React路由

操作下来，真心觉得，没有 Vue 路由好用。。。。

1、安装路由

npm install --save react-router-dom

2、在src下创建router 文件夹并创建index.js 来管理你的路由；

import Login from '../modules/login/login'; // 定义的模块
import Main from '../modules/main/mian';
import Page1 from '../components/Page1 ';
import Page2 from '../components/Page2';
import React from 'react';
import {Route,Switch} from 'react-router-dom';
class RouterConfig extends React.Component{
    render(){
        return(
            <Switch>
           <Route path='/'  exact component={Page1}/>
// main嵌套路由 ，不使用可以去掉
                <Route path="/main" render={() =>
                    <Main>
                        <Route exact path="/main" component={Page1} />
                        <Route path="/main/Page2" component={Page2} /> 
      
                    </Main>
                }/>
                <Route path='/login'  exact component={Login}/>
            </Switch>
        )
    }
}
export default RouterConfig;

使用嵌套路由: mian.js 如下：

import React from 'react';

import {NavLink,withRouter} from 'react-router-dom';

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state={ }
    }
    render() { 
        return ( 
            <div> 主页
             <div>
                    <h2>Topics</h2>
                    <NavLink to='/main'> Page1</NavLink> // Navlink 跳转路由
                    <NavLink to='/main/Page2'> Page2</NavLink>
                   {this.props.children} // 表示router/index.js 嵌套路由数据
                    </div>
            </div>
         );
    }
}

export default withRouter(Main);

3、将路由数据加载 APP.js 中；

import React from 'react';
import './App.css';
import  RouterConfig from './router/index';
import {HashRouter  } from 'react-router-dom';
import {createBrowserHistory} from 'history'
const history = createBrowserHistory();
function App() {
  return (
    <div className="App">
      
            <HashRouter history={history} >
                <RouterConfig/>
            </HashRouter>
     

    </div>
  );
}

export default App;

测试，即可。

通过js 控制跳转路由：

 this.props.history.push('/main/Page2'); //不带参数

this.props.history.push({ pathname: "/PutForwardSubmit", state: { vcode } }); // 带参数

this.props.location.state.vcode 获取参数

Redux简单应用

简单实现，修改，获取数据管理数据。跟vuex一样吧。

1、安装 redux

npm install --save redux

2、在src创建store文件夹并创建 reducer.js，管理数据

const defaultState = {
    inputValue : '默认',
  
}

export default (state = defaultState,action)=>{  //就是一个方法函数

    if(action.type === 'editinputValue' ){
        let newState = JSON.parse(JSON.stringify(state))
         newState.inputValue = '修改'
        return newState
    }  // 触发dispatch 事件，这里可以修改数据，删除。

    return state
}

3、在store文件夹创建index.js，实例redux 的对象

import { createStore } from 'redux'  // 引入createStore方法
import reducer from './reducer'
const store = createStore(reducer)          // 创建数据存储仓库
export default store                 //暴露出去

4、读取数据

import store from '../../store' // 引用刚才创建的store

store.getState() // 获取所有数据

5、修改

 var  action = {
            type:'editinputValue',
            index:'1'
 }
store.dispatch(action) // 对应着  （ 步骤 2 ）

完成。

aixos封装

1、安装

npm install axios;

2、创建 HttpClients.js

// 1. 引入 axios
import axios from 'axios'
// 2. 创建axios对象，配置默认配置
const httpRequest = axios.create({
    baseURL: 'http://192.168.16.96/apis/', // api的base_url
    timeout: 15000 // 请求超时时间

})
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 3. 创建 request拦截器
httpRequest.interceptors.request.use(config => {
    return config
}, error => {
    Promise.reject(error)
})

// 4. 创建response 拦截器
httpRequest.interceptors.response.use(response => response, error => {
    if (error && error.response) {
        switch (error.response.status) {
            case 400:
                error.message = '请求错误'
                break

            case 403:
                error.message = '权限不足,请联系管理员'
                break

            case 404:
                error.message = `请求地址出错: ${error.response.config.url}`
                break

            case 500:
                error.message = error.response.data.errorMsg
                break

            default:
                error.message = '服务器内部错误'
        }
    }
    return Promise.reject(error)
})
// 5. 暴露出去
export default httpRequest

3、创建 api.js

import  httpRequest from  '../../utils/HttpClients' // 引用 HttpClients
export function handApiLogin (data) {
    return httpRequest({
        url: '/login',  // 接口 
        method: 'post', // 请求方式
        data // 参数
    })
}

4、使用

import {  handApiLogin } from './api'  // 先引用
 
 // 在函数中调用
  let params = {}
  handApiLogin(params).then((res)=>{
            console.log('login res:', res)
  })

总结

1、 React 路由就是个坑。本人打包部署服务器时，跳转路由后刷新一直空白。看帖子说将

try_files $uri $uri/  /index.html;

放 nginx 配置下，无果。。。。百般折腾下，终于找到 blog.csdn.net/weixin_3916… 解决方法。将路由换成hash的方式就可以了。

2、React 一切皆js。

React学习-- 路由，Redux简单应用，aixos封装