Bagaimana untuk Navigasi Secara Program dalam Penghala Reaksi tanpa Mengubah Fungsi Render?

Menavigasi Secara Program dengan React-Router

Cabaran:

Dalam aplikasi React anda, anda ingin menavigasi secara pemrograman ke laluan berbeza berdasarkan status log masuk pengguna. Anda tidak pasti cara untuk mencapai ini tanpa mengubah fungsi pemaparan.

Penyelesaian untuk React-Router v4:

Menggunakan Objek Sejarah:

Balut komponen anda dengan denganPenghala dan manfaatkan kaedah history.push daripada prop. Pendekatan ini berguna apabila komponen anda menerima prop penghalaan atau tidak dipautkan terus kepada Penghala.

import { withRouter } from 'react-router';

class App extends React.Component {
...
componentDidMount() {
// Check user login status
if (isLoggedIn) {
// Redirect to home route
this.props.history.push('/home');
}
}
render() {
// Render login component
return <Login />;
}
}

export default withRouter(App);

Menggunakan Ubah hala:

Untuk senario yang lebih mudah, anda boleh gunakan Redirect.

import { withRouter } from 'react-router';

class App extends React.Component {
...
render() {
// If user is logged in, redirect to home route
if (isLoggedIn) {
return <Redirect to="/home" />;
}
// Render login component
return <Login />;
}
}

Penyelesaian untuk React-Router v2/v3:

Menggunakan Konteks Penghala:

Balut komponen anda dan akses konteks penghala untuk menukar laluan secara dinamik.

import React from 'react';

class App extends React.Component {
...
render() {
// Check user login status
if (isLoggedIn) {
// Change route using router context
this.context.router.push('/home');
}
// Render login component
return <Login />;
}
}

App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;

Menggunakan Sejarah Penyemak Imbas:

Mengakses secara langsung sejarah penyemak imbas juga boleh navigasi pencetus.

import { browserHistory } from 'react-router';

// Redirect to specific path
browserHistory.push('/some/path');

Atas ialah kandungan terperinci Bagaimana untuk Navigasi Secara Program dalam Penghala Reaksi tanpa Mengubah Fungsi Render?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!