Notes

React-Router

Edit on GitHub

ReactJS

Programmatic Navigation

  • go to a link
 1// if using react-router (v2+)
 2import { browserHistory } from 'react-router'
 3browserHistory.push('/some/path')
 4
 5// if using newer react-router API inside components (v3+)
 6this.props.history.push('/some/path')
 7
 8// if using react-router-redux
 9import { push } from 'react-router-redux'
10this.props.dispatch(push('/some/path'))
  • go to a link on button click
1<button 
2    onClick={() => browserHistory.push('my/link/')}
3>
4Let's go!
5</button>
  • got to a link and send URL params, query, state whatever along
 1<button 
 2  onClick={() => browserHistory.push(
 3		{
 4			pathname: '/about/',
 5			query: { name: 'Aamnah' },
 6			state: { name: 'Aamnah' }
 7		}
 8  )}
 9>
10Let's go!
11</button>

the above is the same as doing this: browserHistory.push("/about/?name=aamnah").

You can access query values (e.g. NAME) in React with this.props.query.NAME or this.props.location.query.NAME and state with this.props.location.state.NAME