Question

就此问题而言，假设只有两个顶级组件-侧面导航和顶部导航。侧面导航更改路线，顶部导航在右上角有一个头像图像，该头像来自外部资源。如您在此处看到的，顶部导航不嵌套在侧面导航中：

<>
        <SideNav profile={profile}/>
        <TopNav />

        <Switch>
          <PrivateRoute exact path="/app" component={App} />
          <Route exact path="/app/profile" component={UserProfileMain} />
          <Route path="/app/profile/preferences" component={UserProfilePrefs} />
          <Route path="/app/profile/notifications" component={UserProfileNotifs} />
          <Route path="/app/profile/billing" component={UserProfileBilling} />
        </Switch>
      </>

但是，当我使用SideNav切换到另一条路线（例如，从/ app / profile到app / profile / preferences）时，Avatar组件会闪烁。我检查了DevTools的“网络”选项卡，每次更改路线时，它都会再次从缓存加载图像。我认为这意味着TopNav组件将以某种方式重新渲染，但是鉴于它不在外部，因此我不确定为什么会这样做。

TopNav：

const TopNav = () => (
  <Nav>
    <LeftNav>
      <PageTitle>Page Title</PageTitle>
    </LeftNav>
    <RightNav>
      <NavSpacer1>
        <NotificationsIcon />
      </NavSpacer1>
      <NavSpacer2>
        <InboxIcon />
      </NavSpacer2>
      <AvatarWrapper justify="center" alignItems="center">
        <Avatar src="path/to/the/file" small />
      </AvatarWrapper>
    </RightNav>
  </Nav>
)

SideNav.js中的链接：

  <StyledMenuItem disableGutters={true} >
            <StyledLink to="/app/profile">
              <LinkContent alignItems="center">
                <P noMargin>My Profile & Plan</P>
              </LinkContent>
            </StyledLink>
          </StyledMenuItem>

更改路线时，缓存的外部图像组件闪烁

0 个答案: