代码之家 › 专栏 › 技术社区 › Seth Duncan

React Router ScrollToTop不使用材质UI

material-ui react-router reactjs

Seth Duncan · 技术社区 · 8 年前

我使用一个相当简单的网站的材料用户界面,但我有麻烦的ScrollToTop。我遵循了文档,但似乎找不到代码的问题。所需的功能是每次单击链接时,页面都会在顶部加载。相反,单击时,页面会发生更改,但呈现位置与上一页相同。请看下面-我已经简化了代码,这样您就不会被一堆文本所困扰。

参考文件: https://reacttraining.com/react-router/web/guides/scroll-restoration

根组件

const homePage = () => (<Home />);
const helpPage = () => (<Help />);
const termsPage = () => (<Markdown>{terms}</Markdown>);
const privacyPage = () => (<Markdown>{privacy}</Markdown>);

class Header extends React.Component {

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return (
      <MuiThemeProvider theme={darkTheme}>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Link className={classes.link} to="/"><Typography>Home</Typography></Link>
              <Link className={classes.link} to="/help"><Typography>Help</Typography></Link>
              <IconButton onClick={this.props.logOut} className={classes.headerIcon}>
                <AccountCircleIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <main className={classes.content}>
            <div className={classes.toolbar} />
            <Route exact path="/" component={homePage} />
            <Route path="/help" component={helpPage} />
            <Route path="/terms" component={termsPage} />
            <Route path="/privacy" component={privacyPage} />
            <Footer />
          </main>
        </div>
      </MuiThemeProvider>
    );
  }
}

1 回复 | 直到 8 年前

Seth Duncan 8 年前

我发现了问题的根源。ScrollToTop函数正在引用 window main 物料UI标题下的元素。我的解决办法是参考 主要的

class Header extends React.Component {
  main = null;

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.main.scrollTo(0, 0);
    }
  }

  render() {
    return (
      <MuiThemeProvider theme={darkTheme}>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Link className={classes.link} to="/"><Typography>Home</Typography></Link>
              <Link className={classes.link} to="/help"><Typography>Help</Typography></Link>
              <IconButton onClick={this.props.logOut} className={classes.headerIcon}>
                <AccountCircleIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <main ref={(ref) => { this.main = ref; }} className={classes.content}>
            <div className={classes.toolbar} />
            <Route exact path="/" component={homePage} />
            <Route path="/help" component={helpPage} />
            <Route path="/terms" component={termsPage} />
            <Route path="/privacy" component={privacyPage} />
            <Footer />
          </main>
        </div>
      </MuiThemeProvider>
    );
  }
}

----编辑----

class Header extends React.Component {
 constructor(props) {
    super(props);
    this.main = null;
    this.setMainRef = (element) => {
      this.main = element;
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.main.scrollTo(0, 0);
    }
  }

  render() {
    return (
      <MuiThemeProvider theme={darkTheme}>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Link className={classes.link} to="/"><Typography>Home</Typography></Link>
              <Link className={classes.link} to="/help"><Typography>Help</Typography></Link>
              <IconButton onClick={this.props.logOut} className={classes.headerIcon}>
                <AccountCircleIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <main ref={this.setMainRef} className={classes.content}>
            <div className={classes.toolbar} />
            <Route exact path="/" component={homePage} />
            <Route path="/help" component={helpPage} />
            <Route path="/terms" component={termsPage} />
            <Route path="/privacy" component={privacyPage} />
            <Footer />
          </main>
        </div>
      </MuiThemeProvider>
    );
  }
}