title: Routing in React JS on click
body: <p>I am new to React and I want to navigate to another component on button click. I just want to perform a simple routing. This is the code that I tried. But I am not able to route it.       </p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
  import Hello from './HelloComponent';
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.try = this.try.bind(this)
    }
    try = () =&gt; {
      alert();
      &lt;div&gt;
        &lt;Router&gt;
          &lt;Route path="/hello" component={Hello} /&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    }
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="container"&gt;
  
            &lt;button id="b1" onClick={this.try}&gt;Click me&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default App;
  </code></pre>
  
  
  
  <p>Please help me with this code to perform basic routing in react JS</p>