How do you implement routing in a React application

Question

With the help of code can you tell me How do you implement routing in a React application?

Answer 1

Implementing Routing in a React Application (React Router)

1. Install React Router

npm install react-router-dom

2. Set Up Routes in App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./Home";

import About from "./About";

const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </Router>

  );

};

export default App;

3. Create Navigation Links

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

const Navbar = () => {

  return (

    <nav>

      <Link to="/">Home</Link>

      <Link to="/about">About</Link>

    </nav>

  );

};

export default Navbar;

4. Use in Components

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

const Home = () => {

  const navigate = useNavigate();

  return <button onClick={() => navigate("/about")}>Go to About</button>;

};

export default Home;