javascript - React history.push memuat ulang komponen. Ingin hanya dimuat satu kali

Saat mengalihkan setelah komponen dimuat menggunakan history.push - komponen saya dirender lagi. Menyebabkan fungsi componentDidMount() dijalankan dua kali.

Berikut adalah cuplikan sederhana dari salah satu komponen saya. Saya ingin componentDidMount() dijalankan hanya sekali - dan itu bekerja seperti yang diharapkan tanpa history.push. Tapi ketika saya menambahkan history.push - itu dimuat dua kali. (Hal yang sama terjadi jika saya menggunakan Redirect dari react-router)

import * as React from "react";
import { history } from "../../configureServices";
import { explore } from "../../routes";

export class WelcomeComponent extends React.Component<object, object> {
  componentDidMount() {
    // tslint:disable-next-line:no-console
    console.log("componentDidMount");
    history.replace(explore);
  }
  render() {
    return <div />;
  }
}

Konsol :

componentDidMount
componentDidMount

Sangat ingin menemukan cara agar ini hanya dijalankan sekali.

Edit: Terima kasih atas tanggapannya, semuanya. Saya akan memposting cuplikan kode singkat dan kemudian memposting Fiddle sebentar lagi.

--- Pembaruan:

Saya menggunakan React-Router. Saya membangun history (bersama dengan beberapa layanan lainnya) di file configureServices.ts.

// configureServices.ts
import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

Index.ts saya terlihat seperti ini:

import { history } from "./configureServices";

ReactDOM.render( 
  <Provider {...stores}> 
<AppComponent history={history} /> 
  </Provider>, 
document.getElementById("root") );

Dan AppComponent saya yang memiliki semua rute terlihat seperti ini:

import { History } from "history";
import { Route, Switch } from "react-router-dom";
import { Router } from "react-router-dom";
import * as Routes from "../../routes";

...
// Import Components
...

interface Props {
  history: History;
  ...
}

export class AppComponent extends React.Component<Props, {}> {
  componentDidMount() {
    this.props.authStore && this.props.authStore.authenticate();
  }

  render() {
    return (
      <Router history={this.props.history}>
        // For toasts, please ignore for this example
        <ToastProvider
          placement={toastPlacement}
          autoDismissTimeout={toastDismissTimeout}
        >
            // Main App Div = Navbar + Components

          <div className="font-sans flex flex-col h-full text-phi-green-munsell bg-phi-gunmetal-rich-dark">
            <NavBarComponent />

            // This is where the routes are
            <div className="container mx-auto p-2 md:p-3 lg:p-4 justify-start">
              <Switch>
                <Route
                  exact={true}
                  path={Routes.homePage}
                  component={HomepageContainer}
                />
                <Route
                  exact={true}
                  path={Routes.logOut}
                  component={LogOutContainer}
                />
                <Route
                  exact={true}
                  path={Routes.welcome}
                  component={WelcomeContainer}
                />
                <Route
                  path={Routes.explore}
                  component={ExploreComponent}
                />
                <Route
                  path={Routes.searchResults}
                  component={SearchResultsComponent}
                />
              </Switch>
            </div>
            <Footer />
            <DevTools position={mobxDevToolsPosition} />
          </div>
        </ToastProvider>
      </Router>
    );
  }
}

Terima kasih lagi telah membantu saya dengan ini.

Jawaban #1

Ada beberapa hal yang bisa menyebabkan komponen Anda dipasang ulang.

1. Jika pohon komponen React di atas komponen ini berubah. Ini mungkin disebabkan oleh sesuatu seperti memiliki beberapa komponen Route yang menampilkan komponen ini, tetapi jalurnya berubah dari satu ke yang lain. Meskipun komponen yang sama pada akhirnya ditampilkan, komponen Route yang cocok berubah.
2. Jika kunci untuk komponen ini berubah. Jika Anda melakukan sesuatu seperti menggunakan kunci yang dihasilkan secara acak, atau menggunakan indeks array sebagai kunci dan menyusun ulang elemen, maka Anda akan melihat komponen melakukan remount.

Jawaban #2

Saya ingin memperbarui pertanyaannya karena saya sudah memahaminya. Saya memanggil history.replace(explore) di componentDidMount() - yang (untuk alasan yang saya tidak mengerti dengan baik) - menyebabkan pohon komponen React di atas komponen ini berubah seperti yang disebutkan Matt H. Akhirnya saya menggunakan Redirect dari react-router-dom dan mengembalikan redirect tersebut di render. Seperti:

render() {
    return <Redirect to={explore} />;
  }

Jadi, alih-alih melakukan semua panggilan di componentDidMount() dan mengarahkan di fungsi itu juga. Saya melakukan panggilan API di componentDidMount() dan menggunakan render untuk mengarahkan. Senang itu berhasil dan terima kasih semuanya telah menanggapi pertanyaan saya.