Bagaimana untuk Navigasi Secara Pengaturcaraan dalam React Router v2, v3, dan v4?

Menavigasi Secara Program dengan penghala tindak balas

Dalam banyak aplikasi React, mungkin terdapat senario di mana anda perlu menavigasi secara pemrograman antara laluan berdasarkan syarat tertentu, seperti pengesahan pengguna . Begini cara anda boleh mencapai ini menggunakan penghala tindak balas.

penghala reaksi v4

Dalam penghala tindak balas v4, anda boleh menggunakan Komponen Pesanan Tinggi (HOC) withRouter untuk mengakses prop sejarah, termasuk push() untuk menukar laluan secara pemrograman. Begini cara anda boleh melaksanakan ini dalam contoh anda:

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    const isLoggedIn = // Get isLoggedIn from localStorage or API call

    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }

  render() {
    // Return login component
    return <login></login>;
  }
}

export default withRouter(App);

react-router v2 atau v3

Dalam versi terdahulu react-router (v2 dan v3), anda boleh menggunakan konteks untuk menukar laluan, seperti yang ditunjukkan dalam contoh berikut:

import React, { Component } from 'react';
import { Router, Route, Link, browserHistory } from 'react-router';

class App extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object.isRequired,
  };

  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    // Return login component
    return <login></login>;
  }
}
export default App;

Pendekatan Alternatif dengan penghala tindak balas v4

Selain itu, react-router v4 menyediakan cara alternatif untuk menavigasi secara pengaturcaraan:

• Ubah hala: Anda boleh menggunakan komponen Ubah hala untuk mengubah hala pengguna berdasarkan syarat, seperti yang dilihat dalam berikut contoh:

import { BrowserRouter as Router, Redirect } from 'react-router-dom';

function App() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  return (
    <router>
      {isLoggedIn ? <redirect to="/home"></redirect> : <login></login>}
    </router>
  );
}
export default App;

• browserHistory.push(): Anda juga boleh terus menggunakan kaedah browserHistory.push() untuk menukar laluan secara pemprograman, seperti yang ditunjukkan dalam contoh berikut:

import { browserHistory } from 'react-router';

componentDidMount() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  if (isLoggedIn) {
    browserHistory.push('/home');
  }
}

Perlu diingat bahawa pendekatan optimum untuk aplikasi anda mungkin bergantung pada khusus anda keperluan dan asas kod.

Atas ialah kandungan terperinci Bagaimana untuk Navigasi Secara Pengaturcaraan dalam React Router v2, v3, dan v4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!