单击链接后无法卸载组件

时间:2019-06-16 18:39:55

标签: javascript reactjs

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

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

0 个答案:

没有答案