withRouterを使ったページ遷移がうまく行かない

Question

前提・実現したいこと

https://qiita.com/junara/items/a4a98c27dc23fd53ebb9
このサイトを見ながらreact-routerのwithRouterを使って、onClickでのSPAページ遷移を作っています。
自分は、material-uiのappbarで発火させるようにしたいのですが、Routeの子の子の要素であるため、withRouterを使用してのページ遷移になると考えています。
しかし、同じようにしてもボタンをクリック後以下のようなエラーが発生してうまくいきません。
違いと言えば自分はfunctionコンポーネント内で記述していることです。
何か解決策があればコメントお願いします。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'props' of undefined

該当のソースコード

main.jsx

render(
  <BrowserRouter>
    <div>
      <MuiThemeProvider theme={theme}>
        <Switch>
          <Route exact path="/" component={DemoApp} />
          <Route path="/sample" component={Sample} />
        </Switch>
      </MuiThemeProvider>
    </div>
  </BrowserRouter>,
  document.getElementById('root')
)

MenuAppBar.js

function MenuAppBar() {
//省略  

  const handleChange = event => {
    setAuth(event.target.checked);
  };

  const handleMenu = event => {
    setAnchorEl_icon(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl_icon(null);
    setAnchorEl_menu(null);
  };

  const handleClick = event => {
    setAnchorEl_menu(event.currentTarget);
  };

  const handleToPage = () => {  
    this.props.history.push('/sample')　　///////////該当箇所
  }

  return (
    <div className={classes.root}>
      <FormGroup>
        <FormControlLabel
          control={<Switch checked={auth} onChange={handleChange} aria-label="login switch" />}
          label={auth ? 'Logout' : 'Login'}
        />
      </FormGroup>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleClick}>
            <MenuIcon
              aria-controls="customized-menu"
              aria-haspopup="true"
              variant="contained"
            />
          </IconButton>
          <StyledMenu
            id="customized-menu"
            anchorEl={anchorEl_menu}
            keepMounted
            open={open_menu}
            onClose={handleClose}
          >
            <StyledMenuItem>
              <ListItemIcon>
                <PersonIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText primary="1" />
            </StyledMenuItem>
            <StyledMenuItem onClick={handleToPage}> //////該当箇所
              <ListItemIcon>
                <CreateIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText primary="2" />
            </StyledMenuItem>
            <StyledMenuItem>
              <ListItemIcon>
                <StoreIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText primary="3" />
            </StyledMenuItem>
          </StyledMenu>
          <Typography variant="h6" className={classes.title}>
            sample
          </Typography>
          {auth && (
            <div>
              <IconButton
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl_icon}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={open_icon}
                onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default withRouter(MenuAppBar)

Answer 1

そもそもappbar自体をBrowserRouter直下にしたらいいだけの話でした。

Answer 2

function component ではthis.propsのような使い方が出来ないだけではないでしょうか

function MenuAppBar(props) {
//省略  
 const handleToPage = () => {  
    props.history.push('/sample')　　///////////該当箇所
  }
//省略  

Comments

[aiai8976]

無くしてみましたが、エラーのままでした。

[aiai8976]

エラー内容をよく見るとpushが定義されていないに変わっていました！