Reactはルーティングを使用してログインインターフェースにリダイレクトします

<本文>
 <div id="myContent"></div>
 <script src="./dist/bundle.js"></script>
</本文>

'react' から React をインポートします
'antd' から {Form,Input,Icon,Button} をインポートします。
// 'react-dom' から {render} をインポートします
// 'axios' から axios をインポート

import '../node_modules/antd/dist/antd.css' //このファイルをインポートしないと、antd スタイルは表示されません import './style/login.css';

クラスLoginFromはReact.Componentを拡張します{
 コンストラクタ（）{
 素晴らしい（）
 }

 ハンドル送信 = (e) => {
 //送信する前に、入力フィールドにエラーがないか確認します。e.preventDefault();
 
 **history = this.props.history; とします。**
 this.props.form.validateFields((エラー、値)=>{
  if (!エラー) {
  console.log('フォームの受信値: ', values);
  **history.push('/View');**
  }
 })
 }

 与える（）{
 //Form.create でラップされたコンポーネントには、独自の this.props.form プロパティがあり、次の 4 つを含む一連の API が提供されます //getFieldDecorator は、フォームとの双方向バインディングに使用されます //isFieldTouched は、入力コントロールが getFieldDecorator の値収集タイミングを経験したかどうかを判断します options.trigger (子ノードの値を収集するタイミング、デフォルトは onChange)
 //getFieldErrorは入力コントロールのエラーを取得します
 // 入力コントロールのグループのエラーを取得します。パラメータが渡されない場合は、すべてのコンポーネントのエラーが取得されます。
 const { getFieldDecorator、getFieldsError、getFieldError、isFieldTouched } = this.props.form;
 const userNameError = isFieldTouched('userName') && getFieldError('userName');
 const passWordError = isFieldTouched('password') && getFieldError('password');
 戻る （
  <div className="ログイン">
  <div className="ログインフォーム">
   <div className="ログインロゴ">
   <div className="ログイン名">MSPA</div>
   </div>
   <フォーム onSubmit={this.handleSubmit}>
   {/* getFieldDecorator でデコレートされた子を FromItem に配置します */
   <フォーム.アイテム
    validateStatus={userNameError ? 'error' : ''} //validateStatus は検証ステータスです。設定されていない場合は、検証ルールに従って自動的に生成されます。オプション: 'success' 'warning' 'error' 'validating'
   >
   {
    getFieldDecorator('ユーザー名',{
    ルール:[{required:true,message:"ユーザー名を入力してください!"}]
    })(
    <入力プレフィックス={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }}/>}
     placeholder="ユーザー名"
    />
    ）
   }
   </フォーム.アイテム>
   <フォーム.アイテム
    検証ステータス={passWordError ? "エラー" : ''}
   >
   {
    getFieldDecorator('passWord',{
    ルール:[{required:true,message:"パスワードを入力してください!"}]
    })(
    <入力プレフィックス={<アイコン type="lock" style={{ color: 'rgba(0,0,0,.25)' }}/>}
     プレースホルダー="パスワード"
    />
    ）
   }
   </フォーム.アイテム>
   <フォーム.アイテム>
    <ボタン
    タイプ="プライマリ"
    htmlType="送信"
    無効 = {hasErrors(getFieldsError)}
    >ログイン</ボタン>
   </フォーム.アイテム>
   </フォーム>
  </div>
  </div>
 ）
 }
}
LoginForm を Form.create() に設定します。
デフォルトのLoginFormをエクスポートします。

'react' から React をインポートします
'react-router-dom' から {HashRouter を Router 、 Route 、 Switch としてインポートします。
「history」から createBrowserHistory をインポートします。

'../components/myView.js' から MyView をインポートします。
'../login.js' から LoginModule をインポートします。
'../components/myPicture' から MyPicture をインポートします。
'../components/myDocument.js' から MyDocument をインポートします。

デフォルトクラスMyRouteをエクスポートし、React.Componentを拡張します{
 与える（）{
 戻る（
  <ルーター履歴={createBrowserHistory()}>
  <スイッチ>
   <ルートの正確なパス="/" コンポーネント={LoginModule}/>
   <MyView パス='/View' コンポーネント={MyDocument}>
   <ルート パス="/View/abc" コンポーネント={MyDocument} />
   <ルート パス="/View/myPicture" コンポーネント={MyPicture} /> 
   </マイビュー> 
  </スイッチ>
  </ルーター>
 ）
 } 
}

'./router/index.js' から MyRoute をインポートします。
'react-dom' から {render} をインポートします。
'react' から React をインポートします
与える（
 <マイルート />, 
 ドキュメントの要素IDを取得する('myContent')
);