2

How can I add a back button which is not reloading the page?

At the moment I have this, which works, but with a full reload:

import { Link, browserHistory } from 'react-router'

<button onClick={browserHistory.goBack}>Back</button>

But I would rather use Link from React Router to go back without having to reload the page.

Kokovin Vladislav
  • 10,241
  • 5
  • 38
  • 36
cutemachine
  • 5,520
  • 2
  • 33
  • 30
  • It looks like you have the right idea from this question http://stackoverflow.com/questions/30915173/react-router-go-back-a-page-how-do-you-configure-history – Kyle Mathews Aug 23 '16 at 23:20
  • Does clicking the browser back button also cause a page reload? They should work the same way. – Kyle Mathews Aug 23 '16 at 23:20
  • The back button works without the page reload when I came to the page through a component. When I arrived at the page through a link in a Markdown file hitting the back button reloads the page. The same applies when I use the browser's back button. – cutemachine Aug 24 '16 at 05:37
  • Yeah, that's unfortunately how browsers work. If the last path change was from a reload then hitting the back button will also reload regardless. – Kyle Mathews Aug 24 '16 at 05:38
  • Thanks a lot Kyle – cutemachine Aug 24 '16 at 19:12

2 Answers2

2

This is what I ended up using in my React components:

<button onClick={this.context.router.goBack}>Back</button>

If you also want to transition between pages written in Markdown without a page refresh, you need to modify the wrappers/md.jsx file:

Thanks to Scott Nonnenberg for the blog post explaining how to do it.

cutemachine
  • 5,520
  • 2
  • 33
  • 30
2

The latest version of reach-router supports this. You just need to add the following code to create a back button

                        <button onClick={()=>navigate(-1)}>Back</button>

Cheers

Pranav Joglekar
  • 539
  • 6
  • 7