How to Manage In-App Routing with React Router?

If you want to switch between different pages in React applications without refreshing the page, the React Router DOM library is one of the most popular solutions.
In this guide, you will set up the routing system step by step and learn the logic of working with dynamic routes and React Hooks (e.g. useParams, useLocation).

📘 What You Will Learn in This Guide

• How to include React Router in the project
• Switching without refreshing the page with the <Link> component
• How to manage dynamic components with URL parameters
• Using useLocation, useParams and useRouteMatch Hooks
• Creating nested routes

---

⚙️ Prerequisites

• Node.js and npm must be installed on your computer
• An empty React project created with create-react-app (example: genixnode-yonlendirme)
• Basic knowledge of React, JavaScript, HTML and CSS

---

1️⃣ React Router Installation and Component Preparation

React Router allows users to navigate your app without refreshing the page, even when going to different URLs.

🔧 Installation

npm install react-router-dom

This command installs the package that allows us to perform browser-based redirection.

🧩 Simple Page Components

As an example, let's create three components:

mkdir src/components/Yunus
mkdir src/components/Balina
mkdir src/components/Fok

Yunus.js

import React from 'react';
export default function Yunus() {
  return <h2>Yunus</h2>;
}

Similarly, you can create Balina.js and Fok.js files.

---

2️⃣ Defining Routes

We can now bind each component to a URL path.

App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Yunus from '../Yunus/Yunus';
import Balina from '../Balina/Balina';
import Fok from '../Fok/Fok';

function App() {
  return (
    <div className="sarmalayici">
      <h1>GenixNode Deniz Canlıları</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/yunus"><Yunus /></Route>
          <Route path="/balina"><Balina /></Route>
          <Route path="/fok"><Fok /></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

The switch renders only the first matching route.

---

3️⃣ Switching without Refreshing the Page (Link Usage)

Instead of the classic <a> tag, you can quickly switch using React Router's <Link> component.

<nav>
  <ul>
    <li><Link to="/yunus">Yunus</Link></li>
    <li><Link to="/balina">Balina</Link></li>
    <li><Link to="/fok">Fok</Link></li>
  </ul>
</nav>

The <Link> component redirects the page without refreshing it and provides SPA (Single Page Application) experience.

---

4️⃣ Dynamic URL Parameters (useParams and useLocation)

🔹 Reading Query Parameter with useLocation

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

export default function Balina() {
  const { search } = useLocation();
  const match = search.match(/tip=(.*)/);
  const tip = match?.[1];
  return (
    <>
      <h2>Balina Türleri</h2>
      {tip === 'mavi' && <h3>Mavi Balina</h3>}
      {tip === 'katil' && <h3>Katil Balina</h3>}
    </>
  );
}

useLocation allows us to read the ?tip= value in the URL.

🔹 SEO Friendly URL with useParams

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

export default function Balina() {
  const { tip } = useParams();
  return (
    <>
      <h2>Balina Türleri</h2>
      {tip === 'mavi' && <h3>Mavi Balina</h3>}
      {tip === 'katil' && <h3>Katil Balina</h3>}
    </>
  );
}

With this method, you make URLs like /whale/blue more SEO friendly.

---

5️⃣ Nested Routes

In large projects, managing subcomponents within the same file reduces complexity.

Whale.js

import React from 'react';
import { Link, Route, Switch, useRouteMatch, useParams } from 'react-router-dom';

export default function Balina() {
  const { path, url } = useRouteMatch();

  return (
    <>
      <h2>Balina Türleri</h2>
      <nav>
        <ul>
          <li><Link to={`$&#123;url&#125;/mavi`}>Mavi Balina</Link></li>
          <li><Link to={`$&#123;url&#125;/katil`}>Katil Balina</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path={`$&#123;path&#125;/:tip`}>
          <AltBalinaGosterici />
        </Route>
      </Switch>
    </>
  );
}

function AltBalinaGosterici() {
  const &#123; tip &#125; = useParams();
  return (
    <>
      {tip === 'mavi' && <h3>Mavi Balina</h3>}
      {tip === 'katil' && <h3>Katil Balina</h3>}
    </>
  );
}

The useRouteMatch Hook allows you to create sub-routes based on the existing route.

---

🙋‍♀️ Frequently Asked Questions (FAQ)

1. What is the difference between <Link> and <a>?

<Link> redirects without refreshing the page. The <a> tag triggers a full page refresh.

2. Why is Switch used?

Only runs the first matching route, avoiding conflicts.

3. What does exact do?

Enforces an exact match of the route path. /whale and /whale/blue do not conflict.

4. What is the difference in React Router v6?

Routes are used instead of switches, and element={<Bilesen />} is used instead of components.

5. How to do a Protected Route?

Routing is done with a special ProtectedRoute component that controls the user's session.

---

🎯 Result

Now, with React Router, you can build the routing system from scratch and create advanced navigations with user-friendly URLs, dynamic routes, and nested components.

💡 You can easily deploy your React application from GitHub on GenixNode and test the directions live.