React history.push 重新加载组件。希望它只加载一次

Question

在使用 history.push 加载组件后重定向时 - 我的组件再次呈现。导致componentDidMount()函数运行两次。

这是我的一个组件的简化片段。我希望componentDidMount()只运行一次 - 它可以在没有history.push. 但是当我添加history.push- 它加载两次。（如果我使用Redirectfrom也会发生同样的情况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

很想找到一种方法让这个只运行一次。

编辑：谢谢大家的回复。我将发布一个快速代码片段，然后稍后发布一个 Fiddle。

- - 更新：

我正在使用 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

有一些事情可能会导致您的组件重新安装。

1. 如果这个组件上面的react组件树发生了变化。这可能是由于有多个Route组件显示该组件，但路径从一个组件更改为另一个组件等原因引起的。即使最终显示相同的组件，但Route匹配的组件发生了变化。
2. 如果该组件的键发生更改。如果您正在执行诸如使用随机生成的键或使用键的数组索引和重新排序元素之类的操作，那么您将看到组件重新安装。