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(); });