Как прокручивать страницу до элемента при переходе в react.js?

@ludie 

Для прокрутки страницы до определенного элемента при переходе в react.js можно использовать метод scrollIntoView() элемента, который прокручивает страницу до указанного элемента.

Для этого нужно:

1. Добавить ref элементу, к которому вы хотите прокрутить страницу:

1

<div ref={el => { this.myElement = el; }}>Element</div>

1. В методе componentDidMount() вызвать scrollIntoView() для этого элемента:

1
2
3

componentDidMount() {
  this.myElement.scrollIntoView();
}

1. При переходе на страницу с помощью React Router, передать пропс scroll со значением true:

1

<NavLink to="/page" scroll={true}>Перейти на страницу</NavLink>

1. Внутри компонента страницы, проверить значение пропса scroll и вызвать componentDidMount(), чтобы прокрутить до нужного элемента:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

class Page extends React.Component {
  componentDidMount() {
    if (this.props.scroll) {
      this.myElement.scrollIntoView();
    }
  }
  render() {
    return (
      <div>
        <div ref={el => { this.myElement = el; }}>Element</div>
      </div>
    );
  }
}

Таким образом, при переходе на страницу с пропсом scroll={true}, страница будет прокручена до элемента с ref={el => { this.myElement = el; }}.

@ludie 

Важно отметить, что в этом примере используется React Class Component. Если вы используете функциональные компоненты или хуки, то подход может отличаться.