单击链接后无法卸载组件

Question

这与这个问题有关-从那以后，我对此进行了更多研究：

React Component running after I change page

我有三个嵌套元素-<Cards />，<CardRow />和<Card />

每个父母中都有多个孩子。

      <Link to={{
              pathname: "/chat/" + this.state.merchant.id,
              state: {merchant: this.state.merchant}
      }}><li>Message<img src={MessageText} /></li></Link>

单击此链接后，我希望在切换页面时卸载所有组件。

事实上，正在发生的事情是我的新页面（/ chat / xxxx）正在加载，并且只有在挂载后才卸载过去的页面。

这会导致图形错误，导致我的聊天无法正常进行-加载后，除了键盘以外的所有内容都变成白色。

当我单击链接时，如何确保卸载组件？

编辑：它似乎与我的<CSSTransition />有关：

            <CSSTransition
              key={pathname}
              classNames="page"
              timeout={{
                enter: 300,
                exit: 300,
              }}
            >

我可以正确设置路线吗？

<Route
          render={({ location }) => {
            const { pathname } = location;
            return (
              <TransitionGroup className="transition-group">
                <CSSTransition
                  key={pathname}
                  classNames="page"
                  timeout={{
                    enter: 300,
                    exit: 300,
                  }}
                >
    <Route
                    location={location}
                    render={() => (
      <Switch>
        <Route exact path="/login" component={LoginPage} />
        <Route path="/callback/" component={Callback} />
        <Route path="/error/" component={Error} />
        <PrivateRoute exact path="/settings" component={Settings} />
        <PrivateRoute exact path="/" component={Cards} />
        <PrivateRoute exact path="/map/" component={Map} />
        <PrivateRoute exact path="/cards/" component={Cards} />
        <PrivateRoute exact path="/cardrow/" component={CardRow} />
        {/*<PrivateRoute path="/chat/" component={NewChat} />*/}
        <PrivateRoute path="/chat/" component={FakeChat} />
        <PrivateRoute path="/detail/" component={Detail} />
        <PrivateRoute path="/support/" component={Support} />
        <PrivateRoute path="/privacy/" component={Privacy} />
        <PrivateRoute path="/favmerchants/" component={FavMerchants} />
      </Switch>
    )}
    />
                    </CSSTransition>
              </TransitionGroup>
            );
          }}
          />