What are different ways of doing routing in reactJs with realtime example?

There are several ways to handle routing in a React application, including using React Router, Reach Router, and Next.js.

React Router: React Router is the most popular routing library for React. It allows you to declare routes using components, and navigate between them using the <Link> and <Route> components. Here is an example of how to set up routing using React Router:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/contact">Contact</Link>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

Reach Router: Reach Router is a small, simple, and accessible routing library for React. It uses the same component-based approach as React Router, but with a simpler API and better accessibility features. Here is an example of how to set up routing using Reach Router:

import { Router, Link, Route } from '@reach/router'

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <Router>
        <Home path="/" />
        <About path="/about" />
        <Contact path="/contact" />
      </Router>
    </div>
  );
}

Next.js: Next.js is a framework for building server-rendered React applications. It includes a built-in routing system that automatically generates routes based on the file structure of your application. Here is an example of how to set up routing using Next.js:

// pages/index.js
export default function Home() {
  return <div>Welcome to the home page!</div>
}

// pages/about.js
export default function About() {
  return <div>Learn more about us!</div>
}

// pages/contact.js
export default function Contact() {
  return <div>Get in touch with us!</div>
}

These are some examples of how routing can be done in ReactJs, you can use any of them based on the requirement of the project you are working on.

More links on react routing