react-routerでページ遷移後にページ最上部から表示する

概要

• react-routedeページ遷移時、window.scrollTo(0, 0)を実行できるような仕組みにすればOK

仕組み導入前後

新規itemの作成後、react-routerの機能を使って、item画面に遷移するアプリを想定。
react-routerはヘッダー以外の部分を描画するので、何も対策しないと、ヘッダー以外の部分が表示されます。（以下のような感じ）

app/javascript/containers/App.jsx

import React from 'react'
import {MuiThemeProvider} from 'material-ui/styles';
import theme from '../assets/theme'
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Home from './Home'
import About from './About'
import Header from './Header'
import Item from './Item'

class App extends React.Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <BrowserRouter>
          <div>
            <Header/>
            <Switch>
              <Route exact path={'/'} component={Home}/>
              <Route exact path={'/items/:token'} component={Item}/>
              <Route path={'/about'} component={About}/>
            </Switch>
          </div>
        </BrowserRouter>
      </MuiThemeProvider>
    )
  }
}

export default App

• 仕組み導入前
  item画面に遷移したとき青色のヘッダーが見えなくなっているのがわかります。

• 仕組み導入後

item画面に遷移したとき青色のヘッダーから期待通り表示されているのがわかります。

方法

公式の手法のまま。

1. window.scrollTo(0, 0)を実行するcomponent（<ScrollToTopOnMount/>）を作成
2. ページ遷移後、ページ最上部に移動させたいcontainerに<ScrollToTopOnMount/>を追加する

component作成

読み込み時、componentDidMountを使って、最上部にスクロールするjavascriptのコードwindow.scrollTo(0, 0)を実行するcomponentを作成する。

app/javascript/containers/ScrollToTopOnMount.jsx

import React from 'react'

export default class ScrollToTopOnMount extends React.Component {
  componentDidMount(prevProps) {
    window.scrollTo(0, 0)
  }

  render() {
    return null
  }
}

作ったcomponentを組み込む

上記で作成したcomponent<ScrollToTopOnMount/>を使いたいページ（ここでは、Item.jsx）に追加するだけ。

app/javascript/containers/Item.jsx

import React from 'react'
class Item extends React.Component {
  render() {
    return (
      <div>
        <ScrollToTopOnMount/> //これを追加するだけ。
        <ItemTopCard/>
      </div>
    )
  }
}


export default withStyles(style)(Item)

以上。