Navigation not working

[maltebaer]

I would love to use this library in my project, but cannot get it to work.

I use the latest version of react, react-dom and react-router-dom. But maybe I'm just missing something obvious? Here is my implementation.

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import {HashLink} from 'react-router-hash-link'

function App() {
  return (
    <React.Fragment>
      <div style={{height: '100vh'}}>
        <HashLink to="#hash">Scroll to Hash</HashLink>
      </div>
      <div id="hash">
        <h1>Hello Hash</h1>
      </div>
    </React.Fragment>
  )
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
)

After clicking the link, the hash is appended to the URL, but the page is not scrolling to the target id. However, if I refresh the page it will scroll to the target element. Any help appreciated.

Here is a link to a failing example: https://codesandbox.io/s/lingering-sky-2ggl0

[rafgraph]

When I view the app in its own window it works fine for me. I think this might be an issue with codesandbox.

This works: https://2ggl0.csb.app

[maltebaer]

Thank you a lot for the quick reply.

So I can at least exclude wrong syntax for the issue I have.