Routing in React JS on click

I recommend you look at the doc.

<Route path="/hello" component={Hello}/> will display the component Hello exactly where the <Route/> is, but I think your function will do nothing here as it returns a <div> but where does it go?

You need some sort of "higher" component that will render your routes, then call a <Link/>

Then try nesting the button inside the <Link/> ?

<Link to="/??">
     <button id="b1">
          Click me
     </button>
</Link>

I have created a demo that brings it all together. It has three files App.js, About.js, Contacts.js. To Navigate to any component, you need to add its route in App.js, Then depending on the location of your button (About.js), wrap it with Link that helps the element navigate to the specified route. When clicked, the Contacts component should be loaded. Hope this helps. code demo

App.js

import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import About from "./About";
import Contact from "./Contacts";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={About} exact />
        <Route path="/contacts" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

About.js

import React from "react";
import { Link } from "react-router-dom";

function About() {
  return (
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </p>
      <Link to="/contacts">
        <button>click me</button>
      </Link>
    </div>
  );
}
export default About;

Contacts.js

import React from "react";

function Contact() {
  return <div>Call me!!</div>;
}
export default Contact;

in your code

try = () => {
             alert();
            <div>
              <Router>
                   <Route path="/hello" component={Hello}/>
              </Router>
            </div>
           }

your just pushing the route and it's not a action to take you to different page

bellow code will work fine and it's good practice to place router in separate component. click here you can find this code in codesandbox

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./styles.css";

function RouterComponet() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/user" component={User} />
      </Switch>
    </Router>
  );
}
class App extends Component {
  constructor(props) {
    super(props);
  }
  onClick = () => {
    this.props.history.push("/user");
  };
  render() {
    return (
      <div>
        <h1>App component</h1>
        <a onClick={this.onClick} className="link">
          click here
        </a>{" "}
        to user page
      </div>
    );
  }
}

class User extends Component {
  constructor(props) {
    super(props);
  }
  onClick = () => {
    this.props.history.push("/");
  };
  render() {
    return (
      <div>
        <h1>User Componet</h1>
        <a onClick={this.onClick} className="link">
          click here
        </a>{" "}
        to back
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<RouterComponet />, rootElement);

This is the first SO post on google, so I'd like answer the question with updated coding style and answer:

From react v6 you use the useNavigation hook. (Reference)

import { useNavigate } from 'react-router-dom';


export const MyComponent = () => {
    const navigate = useNavigate();
    return (
            <>
                    <button
                            onClick={() => {
                                    navigate('/');
                            }}
                    >
                            click me
                    </button>
            </>
    );
};