Bagaimana untuk Navigasi Secara Program dalam Penghala Reaksi?

Navigasi Secara Program menggunakan React-Router

Masalah:

Dalam aplikasi React, anda perlu menukar laluan secara pemrograman berdasarkan syarat (cth., menyemak sama ada pengguna telah log masuk). Walau bagaimanapun, anda tidak boleh mengubah suai keadaan secara langsung dalam fungsi pemaparan.

Penyelesaian:

Untuk mencapainya, terdapat beberapa strategi yang boleh digunakan, bergantung pada versi React-Router sedang digunakan:

React-Router v4:

• Gunakan withRouter Higher-Order Component (HOC) untuk membalut komponen sasaran.
• Gunakan kaedah history.push dalam kaedah komponen komponenDidMount atau componentWillReceiveProps kitaran hayat untuk menavigasi ke yang berbeza laluan.

React-Router v2 atau v3:

• Gunakan konteks React untuk mengakses penghala dan menukar laluan secara atur cara menggunakan context.router. push.
• Import browserHistory dari react-router dan gunakan browserHistory.push to navigasi.

Pelaksanaan:

Menggunakan denganPenghala (React-Router v4):

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    // Check if the user is logged in
    if (isLoggedIn) {
      // Navigate to the home page using history.push
      this.props.history.push('/home');
    }
  }

  render() {
    // Display the login component if the user is not logged in
    return <Login />;
  }
}

export default withRouter(App);

Menggunakan Ubah hala (React-Router v4 ):

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      // Redirect to the home page using <Redirect>
      return <Redirect to="/home" />;
    }
    // Display the login component if the user is not logged in
    return <Login />;
  }
}

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