React Router ScrollToTop не работает с пользовательским интерфейсом материала - PullRequest
Новая
       14

React Router ScrollToTop не работает с пользовательским интерфейсом материала

0 голосов
/ 18 сентября 2018

Я использую Material UI для довольно простого сайта, но у меня проблемы с 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 Ответ

0 голосов
/ 18 сентября 2018

Я обнаружил корень проблемы.Функция ScrollToTop ссылалась на window, но рассматриваемое содержимое отображалось в элементе main в заголовке пользовательского интерфейса для материала.Мое решение было ссылаться на элемент main - проблема решена.См. Ниже. 

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

---- Редактирование ---- Использование React.createRef () в соответствии с предложением Pier 

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