Question

所以让我尝试详细解释这个问题

我有一个HOC组件，它包装了我的整个React应用，如下所示：

<pre>
export default function withScrollPreservation(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      const section = sessionStorage.getItem(`toScrollSection`);
      positionScroller.scrollTo(section, true)
      }
    render() {
      return (
        //wrapper component
      )
    }
  }
}
</pre>

此HOC用于在用户刷新页面时用于scrollTo恢复

我也正在使用react-scroll库滚动到主页上的部分我有NavBar，可以在各部分之间导航（NavLinks）

NavBar.js

<NavLink to='Technologies' handleScrollLinkClick={this.handleScrollLinkClick} >Technologies</NavLink>
          <NavLink to='HowWeWork' handleScrollLinkClick={this.handleScrollLinkClick} >How we work</NavLink>
          <NavLink to='Industries' handleScrollLinkClick={this.handleScrollLinkClick} >Industries</NavLink>
          <NavLink to='Testimonials' handleScrollLinkClick={this.handleScrollLinkClick} >Testimonials</NavLink>
          <NavLink to='OurTeam' handleScrollLinkClick={this.handleScrollLinkClick} >Our team</NavLink>

接下来，借助React-router，我可以浏览其他视图，例如从主页导航至http://localhost:4000/#/careers/54（这是一个空缺）

当我尝试返回http://localhost:4000时，需要滚动到“职业”部分的开头

针对Projects和http://localhost:4000/#/project/51

问题在于，当我滚动到该部分时，sessionStorage会覆盖该部分的名称

NavLink.js

export default class NavLink extends React.Component {
  handleSetActive(to) {
    let sect = to;
    sessionStorage.setItem(`toScrollSection`, sect);
  }
  render() {
    return (



<li id={this.props.id || null}>
        <Link activeClass="active"
          onSetActive={this.handleSetActive}
          onClickCapture={e => this.props.handleScrollLinkClick(this.props.to, e)}
          to={this.props.to}
          spy={true}
          smooth="easeInOutCubic"
          duration={600}>
          {this.props.children}
        </Link>
      </li>
    );
  }
}

当我尝试从http://localhost:4000/#/careers/54或http://localhost:4000/#/project/45返回时，要存储在sessionStorage中的节的值始终为Career，并且页面始终滚动至Career节。

SessionStorage覆盖问题

0 个答案: