Cara menggunakan Komputer di baru bereaksi-router-dom dari Reactjs
Saya menggunakan versi terakhir bereaksi-router modul, bernama bereaksi-router-dom, yang telah menjadi default ketika mengembangkan aplikasi web dengan Bereaksi. Saya ingin tahu bagaimana untuk membuat pengalihan setelah permintaan POST. Saya telah membuat kode ini, tapi setelah permintaan, tidak ada yang terjadi. Saya review di web, tapi semua data tentang versi sebelumnya yang bereaksi router, dan tidak dengan update terakhir.
Kode:
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
Anda harus menggunakan
setState
untuk mengatur properti yang akan membuat<Mengarahkan>
di dalamrender()
metode.E. g.
Anda juga dapat melihat contoh dalam dokumentasi resmi: https://reacttraining.com/react-router/web/example/auth-workflow
Yang mengatakan, saya akan menyarankan anda untuk menempatkan panggilan API dalam layanan atau sesuatu. Maka anda hanya bisa menggunakan
sejarah
objek untuk rute programatik. Ini adalah bagaimana integrasi dengan redux karya-karya.Tapi saya kira anda memiliki alasan anda untuk melakukannya dengan cara ini.
Berikut ini contoh kecil sebagai respon untuk judul karena semua yang disebutkan contoh-contoh yang rumit dalam pendapat saya serta resmi.
Anda harus tahu bagaimana untuk transpile es2015 serta membuat server anda mampu menangani mengarahkan. Berikut adalah cuplikan untuk mengekspresikan. Info lebih lanjut terkait hal ini dapat ditemukan di sini.
Pastikan untuk menempatkan ini berikut semua rute lainnya.
Ini adalah .jsx file. Perhatikan bagaimana jalan terpanjang datang pertama dan dapatkan's lebih umum. Untuk yang paling umum rute penggunaan yang tepat atribut.
Hanya menyebutnya di dalam setiap fungsi yang anda suka.
Mencoba sesuatu seperti ini.
Bereaksi Router v5 sekarang memungkinkan anda untuk hanya mengarahkan menggunakan sejarah.push() berkat useHistory() hook:
``bej impor { useHistory } dari "bereaksi-router"
fungsi HomeButton() { biarkan sejarah = useHistory()
fungsi handleClick() { sejarah.push(" rumah") }
return (
Pulang ) } ``Atau, anda dapat menggunakan
withRouter
. Anda dapat mendapatkan akses kesejarah
objek's sifat dan terdekat<Rute>
'spertandingan
melaluiwithRouter
higher-order komponen.withRouter
akan lulus diperbaruipertandingan
,location
, dansejarah
alat peraga untuk dibungkus komponen setiap kali hal itu membuat.Atau hanya:
"bereaksi": "^16.3.2", "bereaksi-dom": "^16.3.2", "bereaksi-router-dom": "^4.2.2"
Untuk menavigasi ke halaman lain (halaman Tentang dalam kasus saya), saya menginstal
prop-jenis
. Kemudian saya impor dalam komponen yang bersangkutan.Dan saya menggunakanini.konteks.router.sejarah.push('/tentang')
.Dan itu akan berlayar.Kode saya adalah,
Untuk menavigasi ke komponen lain yang dapat anda gunakan
ini.alat peraga.sejarah.push('/utama');
anda dapat menulis hoc untuk tujuan ini dan menulis metode panggilan mengarahkan, berikut adalah kode:
Atau, anda dapat menggunakan Bereaksi bersyarat rendering.
`` impor { Komputer } dari "bereaksi-router"; impor Bereaksi, { Komponen } dari 'bereaksi';
kelas UserSignup meluas Komponen { konstruktor(alat peraga) { super(alat peraga); ini.negara = { redirect: palsu } } render() {
{ ini.negara.mengarahkan && } // anda akan diarahkan untuk masuk rute } } ``Solusi yang paling sederhana untuk menavigasi ke komponen lain( Contoh menavigasi ke mail komponen dengan klik pada icon):