react新建頁面步驟（新手必看）

react+antd新建頁面步驟：

1.antd創鍵一個頁面從routes開始

import React from 'react';

import { connect } from 'dva';

import UserPage from '../components/userPage'              //這是鏈接組件的地方

function User({dispatch,location}){
    const UserPageProps ={}
    return(
        <div>
            <UserPage {...UserPageProps} />                    //首字母大寫
        </div>
    )
}
export default (User)

2.然后在router.js 里面配置你的頁面

import UserPage from './routes/User'        //鏈接你的routes
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Route path="/user" component={UserPage} />        //配置頁面地址 ，鏈接組件
    </Router>
  );
}

3.接下來components

import React from 'react';
const UserPage = ({ 這里是routes傳過來數據 })=>{
    return(
        <div>
            321
        </div>
    )
}
export default UserPage;

這個時候routes就和components鏈接通了，頁面可以呈現出來了。

4.最后routes和models鏈接

1.這是models頁面里需要寫的一些東西，test是數據

import React from 'react';
export default{
    namespace:'user',
    state:{
        test:{},
    },
    subscriptions:{
        setup({ dispatch, history }) {
            history.listen(location => {
                if (location.pathname === '/user') {
                dispatch({
                    type: 'query',
                    payload: location.query,
                })
                }
            })
        },
    },
    effects:{
        *query({ payload }, { call, put }){
            const data = '胡瀚好帥'
            yield put ({
                type:'testSucess',
                payload:data,
            });
        }
    },
    reducers:{
        testSucess(state,action){
            state.test = action.payload;
            return{...state}
        }
    }
}

2.然后需要在index.js里面配置modoles

app.model(require('./models/user'));

3.完成了modoles頁面后還需要在routes里加鏈接這個modole的代碼

import React from 'react';
import {connect} from 'dva';
import UserPage from '../components/userPage'

function User({dispatch,location,user}){    //這里的user是取modoles里面的值    
    const {
       test                                    //這里是取test
    } = user
    const UserPageProps ={
        test:test                            //把test的值傳到components里面
    }
    return(
        <div>
            <UserPage {...UserPageProps} />
        </div>
        
    )
}

export default connect(({user})=>({user}))(User);        //鏈接modoles的接口

4.這個時候鏈接好了，頁面就可以調用數據了

import React from 'react';

const UserPage = ({
    test,
})=>{
    return(
        <div>
            321
            {test}
        </div>
    )
}

export default UserPage;

5.完成

當你完成以上操作頁面就創建好了。