DEV Community

Selahaddin Osmanoglu
Selahaddin Osmanoglu

Posted on

Part 9: React Router Basics – Navigating Without Page Reloads

Welcome to Part 9 of the React for Beginners series!

Until now, you’ve worked with single-page apps (SPAs) that update content dynamically — but what if you want multiple pages?

That’s where React Router comes in.

It allows your app to:

  • Navigate between pages (Home, About, Contact, etc.)
  • Keep the app fast by avoiding full page reloads
  • Handle dynamic URLs (like /users/123)

🚦 What Is React Router?

React Router is the official routing library for React.

It lets you map URL paths to components — just like how a website has pages.

⚙️ Installation

Install it in your React project:

npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

Then set up the router in your app.

🧱 Basic Setup Example

main.jsx 

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
Enter fullscreen mode Exit fullscreen mode

App.jsx 

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Example Pages

/pages/Home.jsx

function Home() {
  return <h2>Welcome to the Home Page</h2>;
}
export default Home;
Enter fullscreen mode Exit fullscreen mode

/pages/About.jsx

function About() {
  return <h2>About This App</h2>;
}
export default About;
Enter fullscreen mode Exit fullscreen mode

✅ You now have a two-page app with client-side navigation.

🔁 Route Parameters

You can create dynamic routes using : syntax.

Example: /users/:id

<Route path="/users/:id" element={<UserProfile />} />
Enter fullscreen mode Exit fullscreen mode

Inside UserProfile, you can access the id:

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

function UserProfile() {
  const { id } = useParams();
  return <p>Viewing profile for user {id}</p>;
}
Enter fullscreen mode Exit fullscreen mode

❌ 404 Not Found Page

Add a “catch-all” route at the bottom:

<Route path="*" element={<h2>Page Not Found</h2>} />
Enter fullscreen mode Exit fullscreen mode

📦 Nested Routes (Preview)

React Router supports nested routes, layouts, and redirects. These are more useful in larger apps and will be covered in future posts if needed.

✍️ Challenge for You

  • Create a Contact page and route.
  • Add it to your navbar.
  • Add a 404 page that shows when the route is not found.

✅ Summary

  • React Router enables multi-page navigation without reloads.
  • Use <Routes> and <Route> to map URLs to components.
  • Use <Link> for navigation instead of <a>.
  • Dynamic routes allow flexible URLs like /product/123.

🔜 What’s Next?

In Part 10, we’ll explore custom hooks — a powerful way to reuse logic across components and keep your code clean.

Now your app has real pages — just like a production site! 🌐⚛️

Top comments (0)