0

I'm using HashRouter in my application to prevent it from breaking when a page gets refreshed, or when a user tries to navigate to a specific route (ex: mysite.com/about)

How would I go about using page jumps in a tags? Something like this: 

<a href="#contact">Contact Me</a>

just navigates back to the start page with HashRouter. Is there any way to rewrite the link to have it jump down to the specific id?

index.js

...
import { HashRouter } from 'react-router-dom';

ReactDOM.render(
  <HashRouter>
    <App />
</HashRouter>, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
... //import for the components
class App extends Component {
  render() {
    return (
      <div className="App">

        <TopNav />

        <div className="app-container">

        <SideNav />
          <div className="app-content">

          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/projects' component={Projects} />
            ...
          </Switch>

          </div>

        </div>

        <BottomNav />

        </div>
    );
  }
}

export default App;
bluebrooklynbrim
  • 277
  • 4
  • 19
  • This is a known issue of react-router. You will need to scroll to the element manually. You can do this with a third party library such as [react-scrollchor](https://www.npmjs.com/package/react-scrollchor), or you can roll your own. – Kyle Richardson Dec 15 '17 at 17:54
  • Possible duplicate of [Use anchors with react-router](https://stackoverflow.com/questions/40280369/use-anchors-with-react-router) – Rich Churcher Dec 15 '17 at 20:28

0 Answers0