React Router for routing in React (Routing Hooks)

In a React app, you typically use React Router for routing. To handle routing in a React application, you can use the useNavigate and useParams hooks provided by React Router, as useRouter is not directly available in React Router.

Here’s how you can set up React Router and use its features to manage routing in your React app.

Step 1: Install React Router

First, install the necessary packages:

npm install react-router-dom

Step 2: Setup Routing

Create a basic routing structure using React Router.

Create a Routing Setup in your App.tsx:

// src/App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Profile from './pages/Profile';

const App: React.FC = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/profile/123">Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile/:id" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

Step 3: Using useNavigate for Navigation

useNavigate is a React Router hook that allows you to programmatically navigate between pages.

// src/pages/Home.tsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Home: React.FC = () => {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
};

export default Home;

Step 4: Using useParams for Dynamic Routing

The useParams hook allows you to access route parameters (like /profile/:id) within a component.

// src/pages/Profile.tsx
import React from 'react';
import { useParams } from 'react-router-dom';

const Profile: React.FC = () => {
  const { id } = useParams<{ id: string }>(); // Extracts the `id` parameter from the URL

  return (
    <div>
      <h1>Profile Page</h1>
      <p>User ID: {id}</p>
    </div>
  );
};

export default Profile;

Step 5: Using useLocation to Access Current URL

You can use the useLocation hook to access the current URL or query parameters:

// src/pages/About.tsx
import React from 'react';
import { useLocation } from 'react-router-dom';

const About: React.FC = () => {
  const location = useLocation();

  return (
    <div>
      <h1>About Page</h1>
      <p>Current Path: {location.pathname}</p>
    </div>
  );
};

export default About;

Step 6: Switch or Routes (React Router v6)

• If you're using React Router v6, the Switch component has been replaced by Routes.

• Instead of <Route component={Component} />, you use <Route element={<Component />} />.

---

Summary of Hooks

1. useNavigate: Programmatically navigate to other routes.

2. useParams: Access route parameters (e.g., /profile/:id).

3. useLocation: Access the current URL, query parameters, and state.

4. useMatch: Check if a route matches the current URL.

This setup allows you to manage routing and navigation in your React app using React Router.