Membuat Redirect dengan OnClick / After Event di React

Permasalahan

Pernah tidak, memiliki sebuah element yang telah dibuat sedemikian rupa, ternyata saat revisi memiliki fungsi untuk berpindah halaman? atau memiliki sebuah event?

Pernah tidak, ingin mempertahankan sebuah tag pada sebuah element. Misalnya <button/> namun disisi lain, element tersebut memiliki kemampuan untuk memindahkan halaman satu ke halaman lain ?

Solusi

React Router memiliki sebuah function untuk bisa melakukan routing / redirect user ke sebuah halaman, yaitu dengan menggunakan history dengan history.push . Contohnya apabila kita menginginkan sebuah button kita untuk bisa melakukan routing atau baris table kita bisa melakukan redirect ke halaman lain dengan cara

import React from 'react

export default function UjiCoba() { 
const handleOnClick = () => history.push('/sample');    
    return (
    <button type="button" onClick={handleOnClick}>
      Go home
    </button>
  );
}

Bisa dilihat, kita bisa menggunakan onClick pada button atau element lainnya. Tidak melulu harus menggunakan komponen <Link> dari react router. Namun, perlu ada beberapa catatan kita tetap harus menggunakan <Link> daripada onClick dengan history.push. Misalnya terkait dengan tag element yang mana <Link> menggunakan tag element <a/> dan history.push digunakan saat kita mencoba untuk secara otomatis memindahkan sebuah halaman ke halaman lain. Contoh kasusnya setelah login dialihkan ke halaman dashboard.

Contoh otomasi perpindahan page sebuah event seperti

handleDelete() {
  const { match: { params }, history } = this.props;

  axios.delete(`/api/users/${params.userId}`)
    .then(() => {
      history.push('/users');
    });
}

Sekiranya, hanya itu saja yang bisa saya bagikan terkait dengan OnClick untuk routing. Semoga membantu ya!

Sumber :

Using history

Using History Now that we have the user’s info showing, we need to add the functionality to redirect to the /users route after deleting the user through the API. Since we need to redirect after the API returns a response, we can’t just use Link to go back. We ne

Alex SearsScotch

React-router: How to manually invoke Link?

I’m new to ReactJS and to React-Router. I have a component that receives through props a <Link/> object from react-router. Whenever the user clicks on a ‘next’ button inside this component I ...

Alan SouzaStack Overflow