Saya memiliki komponen halaman SimulationReport yang ingin saya alihkan setelah mengklik tombol dari komponen halaman Reports. Ini adalah komponen App dengan Router:

function App() {
  return (
    <React.Fragment>
      <Router>
        <NavigationBar />
        <Sidebar />
        <Switch>
          <Route exact path="/" component={Ratings} />
          <Route path="/LeagueSettings" component={LeagueSettings} />
          <Route path="/Fixtures" component={Fixtures} />
          <Route path="/Reports" component={Reports} />
          <Route path="/SimulationReport" component={SimulationReport} />
        </Switch>
      </Router>
    </React.Fragment>
  );
}

Dan berikut adalah bit kode yang relevan dari Reports yang merupakan komponen fungsi:

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

<td>
   <Button variant="primary" onClick={handleSimView(index)}>
   View
   </Button>
</td>

  const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    props.history.push("/SimulationReport");
  };

Dan di akhir file saya punya ini:

export default withRouter(Reports);

Setelah mengklik tombol, saya menerima kesalahan ini:

TypeError: Cannot read property 'push' of undefined

Saya tidak yakin apa yang harus saya lakukan untuk mengalihkan ini? Atau mungkin saya harus melakukannya dengan cara yang berbeda?

0
clattenburg cake 28 Mei 2020, 07:15

1 menjawab

Jawaban Terbaik

Tampaknya prop history Anda tidak diteruskan dari tag <Route> di komponen Anda. Anda dapat meneruskan props ke Route Rendered Component dengan melakukan baris berikut:

<Route
 path='/SimulationReport'
 render={(props) => <SimulationReport {...props} history={yourHistoryObjectForTheRouter} />}
/>

Di mana yourHistoryObjectForTheRouter akan menjadi objek ekspor riwayat kustom Anda.

EDIT: Kode yang diperbarui

PERBARUI UNTUK MENJAWAB KEBUTUHAN OP:

1° Baiklah, jadi pertama-tama Anda harus menginstal paket bernama history ke Aplikasi React Anda. (Anda dapat menggunakan npm i history atau yarn add history. Itu tergantung pada apa yang telah Anda instal. Jika Anda tidak tahu apa itu benang, gunakan npm pilihan)

2° Di suatu tempat di proyek Anda di dalam folder App (src/App/), Anda akan membuat folder lain bernama history dan di dalam index.js. Isi file index.js akan menjadi yang berikutnya.

import { createBrowserHistory } from 'history';

export default createBrowserHistory({});

3° Setelah selesai, buka file App/index.js Anda, di mana Anda memiliki tag utama <Router>. Jika Anda telah melakukan semuanya seperti yang saya nyatakan sebelumnya, dalam App/index.js Anda akan menambahkan impor baru:

import history from "./history";

Yang merupakan Objek Riwayat Kustom baru Anda.

Di sini Anda dapat memilih dua cara untuk menyelesaikan masalah Anda

=== Solusi Pertama

4° Gulir ke bawah dalam file yang sama, sampai Anda menemukan tag <Router></Router> Anda, dan Anda akan memperbaruinya ke bagian berikutnya:

<Router>
   <NavigationBar />
    <Sidebar />
    <Switch>
      <Route exact path="/" component={Ratings} />
      <Route path="/LeagueSettings" component={LeagueSettings} />
      <Route path="/Fixtures" component={Fixtures} />
      <Route path="/Reports" component={Reports} />
      <Route
          path='/SimulationReport'
          render={(props) => <SimulationReport {...props} history= 
              {history} />}
      />
    </Switch>
</Router>

Setelah ini, Anda akan mengatur Objek Riwayat Kustom Anda dan komponen Anda sekarang akan berfungsi. Namun solusi ini hanya akan berfungsi untuk Route komponen tertentu, dan itu berarti Anda harus melakukan hal yang sama untuk <Route > lain yang memerlukan penggunaan objek history.

Berhenti di sini jika Anda memilih solusi ini.

=== Solusi Kedua

Solusi ini lebih baik, karena Anda sekarang memiliki akses ke objek histori Anda secara global, hanya dengan impor.

4° Gulir ke bawah dalam file yang sama, sampai Anda menemukan tag <Router></Router> Anda, dan Anda akan memperbaruinya ke bagian berikutnya:

<Router history={history}> //Here's the change
   <NavigationBar />
    <Sidebar />
    <Switch>
      <Route exact path="/" component={Ratings} />
      <Route path="/LeagueSettings" component={LeagueSettings} />
      <Route path="/Fixtures" component={Fixtures} />
      <Route path="/Reports" component={Reports} />
      <Route path="/SimulationReport" component={SimulationReport} />
    </Switch>
</Router>

Setelah ini, Anda akan menyiapkan Objek Riwayat Kustom Anda.

5° Arahkan ke file yang berisi komponen fungsional Reports, dan pada impor di bagian atas file Anda, Anda akan mengimpor history yang sama seperti yang Anda lakukan di App/index.js . Berhati-hatilah karena tergantung pada tingkat subfolder tempat komponen Laporan Anda berada, cara impor akan berubah. Itu bisa berakhir seperti ini:

import history from "../history"; atau ini import history from "../../history"; itu tergantung atau bahkan lebih "../". Itu tergantung pada level subfolder Anda

Setelah itu, Anda harus memperbarui fungsi Anda handleSimView jadi alih-alih melakukan ini:

const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    props.history.push("/SimulationReport");
  };

Melakukan hal ini:

const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    history.push("/SimulationReport"); //Change is here, removed "props."
  };

Setelah ini, kode Anda akan berfungsi. Solusi ini Anda dapat menerapkannya di mana saja karena Anda hanya perlu mengimpor objek history dan menggunakannya saja.

Saya akan menunggu kabar dari Anda untuk melihat apakah itu berhasil. Jika ada hal lain yang terjadi, Anda dapat bertanya kepada saya.

1
Alan Maldonado 28 Mei 2020, 04:59