Apa cara terbaik untuk mengarahkan halaman menggunakan React Router?

Saya baru mengenal React Router dan mengetahui bahwa ada begitu banyak cara untuk mengarahkan ulang halaman:

1. Menggunakan browserHistory.push("/path")

   import { browserHistory } from 'react-router';
   //do something...
   browserHistory.push("/path");
   

2. Menggunakan this.context.router.push("/path")

   class Foo extends React.Component {
       constructor(props, context) {
           super(props, context);
           //do something...
       }
       redirect() {
           this.context.router.push("/path")
       }
   }
   
   Foo.contextTypes = {
       router: React.PropTypes.object
   }
   

3. Di React Router v4, ada this.context.history.push("/path")dan this.props.history.push("/path"). Detail: Bagaimana cara mendorong ke Riwayat di React Router v4?

Saya sangat bingung dengan semua opsi ini, adakah cara terbaik untuk mengarahkan ulang halaman?

Sebenarnya itu tergantung pada kasus penggunaan Anda.

1) Anda ingin melindungi rute Anda dari pengguna yang tidak sah

Jika demikian, Anda dapat menggunakan komponen yang dipanggil <Redirect />dan dapat menerapkan logika berikut:

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

Perlu diingat bahwa jika Anda ingin <Redirect />bekerja seperti yang Anda harapkan, Anda harus menempatkannya di dalam metode render komponen Anda sehingga pada akhirnya akan dianggap sebagai elemen DOM, jika tidak maka tidak akan berfungsi.

2) Anda ingin mengalihkan setelah tindakan tertentu (katakanlah setelah membuat item)

Dalam hal ini Anda dapat menggunakan riwayat:

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

atau

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

Untuk memiliki akses ke riwayat, Anda dapat membungkus komponen Anda dengan HOC yang dipanggil withRouter. Ketika Anda membungkus komponen Anda dengan itu, itu lewat match locationdan historyprops. Untuk detail lebih lanjut, lihat dokumentasi resmi untuk withRouter .

Jika komponen Anda adalah anak dari <Route />komponen, yaitu jika itu adalah sesuatu seperti <Route path='/path' component={myComponent} />, Anda tidak perlu untuk membungkus komponen Anda dengan withRouter, karena <Route />melewati match, locationdan historyuntuk anaknya.

3) Alihkan setelah mengklik beberapa elemen

Ada dua opsi di sini. Anda dapat menggunakan history.push()dengan meneruskannya ke onClickacara:

<div onClick={this.props.history.push('/path')}> some stuff </div>

atau Anda dapat menggunakan <Link />komponen:

 <Link to='/path' > some stuff </Link>

Saya pikir aturan praktis dengan kasus ini adalah mencoba menggunakan <Link />dulu, saya kira terutama karena kinerja.

Sekarang dengan react-router v15.1dan seterusnya kita bisa useHistorymenghubungkan, Ini cara yang sangat sederhana dan jelas. Berikut adalah contoh sederhana dari blog sumber.

import { useHistory } from "react-router-dom";

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

Anda dapat menggunakan ini dalam komponen fungsional dan kait khusus apa pun. Dan ya, ini tidak akan bekerja dengan komponen kelas yang sama seperti pengait lainnya.

Pelajari lebih lanjut tentang ini di sini https://reacttraining.com/blog/react-router-v5-1/#usehistory

Anda juga dapat menggunakan react router dom library useHistory;

`
import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
`

https://reactrouter.com/web/api/Hooks/usehistory

Salah satu cara termudah: gunakan Tautan sebagai berikut:

import { Link } from 'react-router-dom';

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

Jika kita ingin menutupi seluruh bagian div sebagai tautan:

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

Anda juga bisa Redirectdalam Routesebagai berikut. Ini untuk menangani rute yang tidak valid.

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>