Реагирует на историю.push перезагружает компонент.Хотите загрузить только один раз

Question

При перенаправлении после загрузки компонента с использованием history.push - мой компонент отображается снова.Вызов функции componentDidMount() для запуска дважды.

Вот упрощенный фрагмент одного из моих компонентов.Я хочу, чтобы componentDidMount() запускался только один раз - и он работает, как и ожидалось, без history.push.Но когда я добавляю history.push - он загружается дважды.(То же самое происходит, если я использую Redirect из 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 />;
  }
}

Консоль:

componentDidMount
componentDidMount

Хотелось бы найти способ запустить этот прогон только один раз.

Редактировать: Спасибо всем за ответы.Я собираюсь опубликовать небольшой фрагмент кода, а затем немного опубликовать скрипку.

--- Обновление:

Я использую React-Router.Я строю историю (вместе с некоторыми другими службами) в файле configureServices.ts.

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

export const history = createBrowserHistory();

Мой index.ts выглядит так:

import { history } from "./configureServices";

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

И мой AppComponent, который имеет всемаршруты выглядят так:

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>
    );
  }
}

Еще раз спасибо за помощь в этом.

Answer 1

Я хотел обновить вопрос, так как я понял это.Я звонил history.replace(explore) в componentDidMount() - что (по причинам, которые я не очень хорошо понимаю) - вызывало изменение дерева компонентов реакции над этим компонентом, как упоминал Мэтт Х.Я закончил тем, что использовал Redirect из react-router-dom и возвратил перенаправление в render.Например:

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

Итак, я вместо того, чтобы делать все вызовы в componentDidMount () и перенаправлять в эту функцию также.Я сделал вызовы API в componentDidMount () и использовал рендер для перенаправления.Рад, что это сработало, и спасибо всем за ответ на мой вопрос.

Answer 2

Есть несколько вещей, которые могут привести к перемонтированию вашего компонента.

1. Если дерево компонентов реакции над этим компонентом изменяется.Это может быть вызвано чем-то вроде нескольких Route компонентов, которые отображают этот компонент, но путь меняется с одного на другой.Несмотря на то, что в конечном итоге отображается тот же компонент, соответствующий компонент Route изменился.
2. Если ключ для этого компонента изменился.Если вы делаете что-то вроде использования случайно сгенерированных ключей или индексов массива для ключей и переупорядочения элементов, то вы увидите компоненты remount.