When you start using the React sample templates, one thing that you’ll notice is the navigation menu; it tends to look like this:
<div className='navbar-collapse collapse'>
<ul className='nav navbar-nav'>
<li>
<NavLink to={ '/' } exact activeClassName='active'>
<span className='glyphicon glyphicon-home'></span> Home
</NavLink>
</li>
After messing around for a while, you’ll probably think: now I need to navigate somewhere from within the code of the tsx/jsx file. Turns out you need to use `.push()`:
import { NavLink } from 'react-router-dom';
. . .
doSomething()
.then(output => {
this.props.history.push('/timbuktu');
});
Not exactly intuitive. And even less intuitive is if you want to go back. You’re thinking it must be `.pop()`? So was I; it’s actually:
import { NavLink } from 'react-router-dom';
. . .
doSomething()
.then(output => {
this.props.history.goBack();
});