react-router-hash-route

Enable hash / id based routes with react router.

Try out the example.

The HashRoute component scrolls to the "wrapped" element after componentDidMount or on route change when the hash / id matches.

Usage

Given the component Foo (Your component MUST render the id prop):

const Foo = ({id}) => <div id={id}>Foo</div>

render prop

<HashRoute 
  id='foo'
  render={({id}) => <Foo id={id} />} 
  />

component prop

<HashRoute
  id='foo'
  component={Foo}
  />

Options

offset prop (number, default=0)

An optional vertical offset when using fixed headers.

scoll prop (function, default="jump")

A customizable scroll function with the signature:

const scroll = (node, offset) = {}

If you want to have animations etc.

Development

Start watching and building the lib:

$ npm i && npm run dev

Build and start the example website with hot-reloading:

$ npm run dev