DEV Community

Mourya Vamsi Modugula
Mourya Vamsi Modugula

Posted on

1

Mastering React Routing: A Complete Guide to Navigating Your Application

1. Introduction to React Router

React Router is a library for handling routing in React applications. It allows your app to navigate between different components and views without a full-page reload, making the user experience seamless.


2. Basic Setup

Start by installing react-router-dom:

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

Set up basic routing using BrowserRouter, Routes, and Route:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

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

export default App;
Enter fullscreen mode Exit fullscreen mode

3. Nested Routing

For more complex apps, you can nest routes. Here’s how to set up nested routes in a parent component:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Dashboard = () => <h2>Dashboard Home</h2>;
const Profile = () => <h2>Your Profile</h2>;

const DashboardLayout = () => {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Home</Link>
        <Link to="/dashboard/profile">Profile</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="profile" element={<Profile />} />
      </Routes>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard/*" element={<DashboardLayout />} />
      </Routes>
    </Router>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

4. Dynamic Routing

Dynamic routing allows you to pass parameters in the URL. Here’s how to define and access a dynamic route:

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

const User = () => {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/user/1">User 1</Link>
        <Link to="/user/2">User 2</Link>
      </nav>

      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

5. Protected Routes

To implement protected routes, you can create a custom PrivateRoute component:

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ? <Outlet /> : <Navigate to="/login" />;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<PrivateRoute />}>
          <Route path="" element={<Dashboard />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

6. Programmatic Navigation

Sometimes, you may want to navigate programmatically, like after a form submission. Use the useNavigate hook in React Router v6:

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

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    <div>
      <h2>Login</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;
Enter fullscreen mode Exit fullscreen mode

7. 404 Pages

Handle 404 (Not Found) errors by creating a catch-all route:

const NotFound = () => <h2>404 - Page Not Found</h2>;

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

8. Performance Considerations

For large applications, lazy loading routes can improve performance. Here’s how to implement lazy loading with React.lazy() and Suspense:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay