The React routing

Operation down, really feel, no Vue routing easy to use…

1. Install routes

npm install --save react-router-dom

Copy the code

Create a router folder under SRC and create index.js to manage your route.

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}/> // The main nested routine consists of, <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;Copy the code

Use nested routines by: mian.js as follows:

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> home <div> <h2>Topics</h2> <NavLink to='/main'> Page1</NavLink> // NavLink jump route <NavLink to='/main/Page2'> Page2</NavLink> {this.props. Children} // } } export default withRouter(Main);Copy the code

3. Load routing data into 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;

Copy the code

Test, ok.

Control redirect routing through JS:

this.props.history.push('/main/Page2'); // This.props.history. Push ({pathName: "/PutForwardSubmit", state: {vcode}}); / / take this. Props. The location. The state. The vcode access parametersCopy the code

Redux simple application

Simple implementation, modification, access to data management data. Same as vuex.

1. Install Redux

npm install --save redux
Copy the code

2. Create a store folder in SRC and create reducer.js to manage data

const defaultState = { inputValue : 'default', } export default (state = defaultState,action)=>{// is a method function if(action.type === 'editinputValue'){let newState = Json.parse (json.stringify (state)) newstate. inputValue = 'modify' return newState} // The dispatch event is triggered. return state }Copy the code

Create index.js in the store folder and instantiate the redux object

Import {createStore} from 'redux' import reducer from './reducer' const store = CreateStore (reducer) // Create a data storage repository export default store // The reducer is exposedCopy the code

4. Read data

import store from '.. /.. /store' // reference store store.getState() // get all dataCopy the code

5, modify,

Var action = {type:'editinputValue', index:'1'} store.dispatch(action)Copy the code

To complete.

Aixos encapsulation

1, install,

npm install axios;
Copy the code

Create httpclients.js

Import axios from 'axios' // 2. Create axios object with the default configuration const httpRequest = axios. Create ({baseURL: 'http://192.168.16.96/apis/', / / API base_url timeout: 15000 / / request timeout}) axios. Defaults. Headers. Post [' the content-type '] = 'application/x - WWW - form - urlencoded' / / 3. Create request interceptor httpRequest. Interceptors. Request. Use (config = > {return config}, error => { Promise.reject(error) }) // 4. Create the response interceptor httpRequest. Interceptors. Response. Use (response = > response, error => { if (error && error.response) { switch (error.response.status) { case 400: Error. Message = 'request error' break case 403: error. Message = 'Request error' break case 403: error. ${error.response.config.url}` break case 500: error.message = error.response.data.errorMsg break default: Error. Message = 'server internal error'}} return promise.reject (error)}) // 5. Export default httpRequestCopy the code

Create api.js

import httpRequest from '.. /.. // HttpClients export function handApiLogin (data) {return httpRequest({url: '/ login', / / interface method: "post", / / request data / / parameter})}Copy the code

4, the use of

Import {handApiLogin} from './ API '// call let params = {} handApiLogin(params). Then ((res)=>{ console.log('login res:', res) })Copy the code

conclusion

1. React routes are pits. When I package the deployment server, the refresh of the route has been blank. Read the post that will

try_files $uri $uri/  /index.html;

Copy the code

Nginx configuration, no result… By all means, finally find blog.csdn.net/weixin_3916… Solutions. Change the route to hash.

React Everything is JS.