Routing in React JS

Sure! Here's a detailed blog post on routing in React JS, ideal for beginner to intermediate developers looking to understand how navigation and page management work in React apps.

---

Routing in React JS 

When building modern single-page applications (SPAs) with React, routing is what makes your app feel like a multi-page website. It allows you to navigate between different views without refreshing the browser. This seamless experience is made possible by React Router, the standard routing library for React.

In this post:

• What is routing?

• Why routing matters in SPAs

• Installing React Router

• Basic routing setup

• Dynamic routes

• Nested routes

• Navigation (Link, NavLink)

• Route parameters

• Programmatic navigation

• 404 Not Found routes

• Best practices

---

What is Routing?

In traditional websites, each page is a separate HTML file fetched from the server. In contrast, Single Page Applications SPAs like those built with React load only a single HTML file and dynamically render content using JavaScript as you navigate.

Routing in React allows:

• Switching views/components

• Handling browser history (forward/back)

• Bookmarkable URLs

All without reloading the page.

---

 Installing React Router

The official package is react-router-dom.

📦 Installation

npm install react-router-dom

  Setting Up Basic Routing

Here’s how to set up a simple routing system.

🗂 File Structure

src/
├── App.js
├── pages/
│   ├── Home.js
│   ├── About.js
│   └── Contact.js
└── index.js

App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}
export default App;

pages/Home.js (Example)

import React from 'react';
function Home() {
  return <h1>Welcome to the Home Page</h1>;
}
export default Home;

Do the same for About.js and Contact.js.

---

 Navigation with Link & NavLink

Replace anchor tags (<a>) with <Link> or <NavLink> from React Router.

import { Link, NavLink } from 'react-router-dom';
<Link to="/about">About</Link>
<NavLink 
  to="/contact" 
  className={({ isActive }) => isActive ? "active" : ""}>
  Contact
</NavLink>

NavLink is especially useful for styling active routes.

---

 Dynamic Routes (Route Parameters)

Dynamic routing lets you pass variables in the URL.

👇 Setup

<Route path="/user/:id" element={<UserProfile />} />

In UserProfile.js:

import { useParams } from 'react-router-dom';
function UserProfile() {
  const { id } = useParams();
  return <h2>Viewing profile of user: {id}</h2>;
}

Access the page at /user/123, /user/john, etc.

---

 Nested Routes

Routes can be nested to create layouts with subcomponents.

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

In Dashboard.js, include <Outlet /> where the nested content should render:

import { Outlet } from 'react-router-dom';
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

Now /dashboard/profile and /dashboard/settings work inside the Dashboard layout.

---

 Programmatic Navigation

Use useNavigate to go to another route via code.

import { useNavigate } from 'react-router-dom';
function Home() {
  const navigate = useNavigate();
  const goToAbout = () => {
    navigate('/about');
  };
  return <button onClick={goToAbout}>Go to About</button>;
}

You can also pass state:

navigate('/about', { state: { from: 'home' } });

Retrieve with useLocation.

---

 404 Not Found Route

Catch unmatched routes with a wildcard *.

<Route path="*" element={<NotFound />} />

---

✅ Best Practices

• Use semantic and meaningful URLs

• Use NavLink for active styling

• Always include a * catch-all route

• Keep routes DRY by using layout components

• Lazy-load routes for better performance (with React.lazy and Suspense)

---

 Bonus: Lazy Loading Routes

For larger apps, split your code using React.lazy:

const Home = React.lazy(() => import('./pages/Home'));
<Route path="/" element={
  <React.Suspense fallback={<div>Loading...</div>}>
    <Home />
  </React.Suspense>
} />

---

 Conclusion

React Router is the backbone of navigation in React applications. From static to dynamic and nested routes, and from navigation links to programmatic routing—once you’ve got the hang of it, you unlock powerful possibilities for building complex, user-friendly SPAs.

---

🔗 Useful Links

• React Router Documentation

• React Router GitHub

---

 

Contact us for software training, education or development