Reactjsの新しいreact-router-domでRedirectを使うには?
ReactでWebアプリケーションを開発する際のデフォルトになっている、react-router-domという最終バージョンのreact-routerモジュールを使用しています。POSTリクエストの後にリダイレクトを行う方法を知りたいのです。私はこのコードを作っていますが、リクエストの後、何も起こりません。Webで調べましたが、すべてのデータはreact routerの以前のバージョンに関するもので、最後のアップデートではありません。
コードです:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'
import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';
class SignUpPage extends React.Component {
constructor(props) {
super(props);
this.state = {
errors: {},
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};
this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}
changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;
this.setState({
client
});
}
async processForm(event) {
event.preventDefault();
const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };
axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
errors: {}
});
<Redirect to="/"/> // Here, nothings happens
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;
this.setState({
errors
});
});
}
render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
<SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
<Footer />
</div>
</div>
);
}
}
export default SignUpPage;
94
11
setState
を使用して、
render()`メソッド内で``をレンダリングするためのプロパティを設定する必要があります。例
また、公式ドキュメントにも例が掲載されています: https://reacttraining.com/react-router/web/example/auth-workflow
とはいえ、APIコールはサービスの中に入れるなどした方がいいと思います。そうすれば、
history
オブジェクトを使ってプログラム的にルーティングすればいいのです。これは、reduxとの統合の仕組みです。でも、こうしなければならない理由があるんでしょうね。
ここでは、タイトルに対応した小さな例を挙げます。公式の例と同様に、言及された例はすべて複雑だと私は考えています。
es2015をトランスパイルする方法と、サーバーがリダイレクトを処理できるようにする方法を知っておく必要があります。以下は、express用のスニペットです。これに関するより多くの情報は、こちらにあります。
他のすべてのルートよりも下に置くようにしてください。
これは.jsxファイルです。一番長い経路が最初に来て、より一般的になっていることに注目してください。最も一般的な経路は、正確な属性を使用します。
好きな機能内で呼び出すだけです。
こんな感じで試してみてください。
React Router v5では、[useHistory()フック][1]のおかげで、history.push()を使用して簡単にリダイレクトできるようになりました。
または、「withRouter」を使用することもできます。 「history」オブジェクトのプロパティと、最も近い「< Route>」の「match」に、「withRouter」高次コンポーネントを介してアクセスできます。
withRouter
は、レンダリングするたびに、更新されたmatch
、location
、およびhistory
プロップをラップされたコンポーネントに渡します。またはただ:
。 "react": "^ 16.3.2"、。 "react-dom": "^ 16.3.2"、。 "react-router-dom": "^ 4.2.2"。
。別のページ(私の場合はページについて)に移動するには、「prop-types」をインストールしました。 次に、対応するコンポーネントにインポートします。また、「this.context.router.history.push( '/ about')」を使用しました。
私のコードは、です。
別のコンポーネントに移動するには、
this.props.history.push( '/ main');
を使用できます。この目的でhocを書き込んで、メソッド呼び出しリダイレクトを書き込むことができます。これがコードです。
または、React条件付きレンダリングを使用することもできます。
``。 「react-router」から{Redirect}をインポートします。 React、「react」から{Component}をインポートします。
クラスUserSignupはコンポーネント{を拡張します。 コンストラクター(小道具){。 super(props);。 this.state = {。 リダイレクト:false。 }。 }。 render(){。
< React.Fragment>。 {this.state.redirect&& < Redirect to = "/ signin" />} //サインインルートにリダイレクトされます。 }。 < / React.Fragment>。 }。 ``。別のコンポーネントに移動する最も簡単なソリューションは(例。 アイコンをクリックしてメールコンポーネントに移動します):