Programmatically navigate using react router

Question

With react-router I can use the Link element to create links which are natively handled by react router.

I see internally it calls t

Answer 1

To do the navigation programmatically, you need to push a new history to the props.history in your component, so something like this can do the work for you:

//using ES6
import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    /* Look at here, you can add it here */
    this.props.history.push('/redirected');
  }

  render() {
    return (
      

        
          Redirect!!!
        
      
    )
  }
}

export default App;