Next.js & React-Router-Dom: A Beginner’s Guide to Navigation

Written by

learnmodernjavascript

in

In the world of web development, creating a seamless user experience is paramount. One of the most critical aspects of this is navigation – the ability for users to easily move between different pages and sections of your application. While Next.js provides its own built-in routing system, sometimes you might want more control, flexibility, or features. This is where react-router-dom comes in. It’s a powerful and widely-used library that allows you to handle navigation in your Next.js applications with ease.

Why Use React-Router-Dom in Next.js?

Next.js offers a file-system based router out of the box, which is excellent for simple applications or when you want a straightforward setup. However, react-router-dom provides several advantages, especially as your application grows in complexity:

  • Advanced Routing: Handle complex routing scenarios, including nested routes, dynamic routes, and route parameters.
  • Client-Side Navigation: Enables smooth transitions between pages without full page reloads, enhancing the user experience.
  • Route Protection: Implement authentication and authorization easily to secure your routes.
  • More Control: Gain finer control over navigation behavior, such as programmatic navigation and route transitions.

Setting Up React-Router-Dom in Your Next.js Project

Before you begin, make sure you have a Next.js project set up. If you don’t, you can create one using the following command:

npx create-next-app my-router-app
cd my-router-app

Next, install react-router-dom:

npm install react-router-dom

Basic Routing with React-Router-Dom

Let’s create a basic setup with a few pages and links to navigate between them. We’ll start by creating three components: Home, About, and Contact. Create a components folder in your project, and then create the following files inside it:

components/Home.js

import React from 'react';

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;

components/About.js

import React from 'react';

function About() {
  return (
    <div>
      <h2>About</h2>
      <p>Learn more about us.</p>
    </div>
  );
}

export default About;

components/Contact.js

import React from 'react';

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
      <p>Get in touch with us.</p>
    </div>
  );
}

export default Contact;

Now, let’s set up the routing in your pages/_app.js file. This file is used to initialize pages. We’ll wrap our application with BrowserRouter and add links to navigate between our components.

pages/_app.js

import '../styles/globals.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from '../components/Home';
import About from '../components/About';
import Contact from '../components/Contact';

function MyApp({ Component, pageProps }) {
  return (
    
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              About
            </li>
            <li>
              Contact
            </li>
          </ul>
        </nav>
        
          <Route path="/" element={} />
          <Route path="/about" element={} />
          <Route path="/contact" element={} />
        
      </div>
    
  );
}

export default MyApp;

In this example:

  • We import BrowserRouter, Routes, Route, and Link from react-router-dom.
  • BrowserRouter wraps the entire application, enabling routing.
  • Link components are used for navigation. They’re similar to regular <a> tags but prevent full page reloads. The to prop specifies the route path.
  • Routes and Route define the routes. Each Route associates a path with a component to render.

Run your Next.js development server (npm run dev) and navigate to your application in the browser. You should now be able to click the links and navigate between the Home, About, and Contact pages.

Understanding React-Router-Dom Components

Let’s dive deeper into the key components used in the example above:

BrowserRouter

BrowserRouter is the core component that enables routing. It uses the HTML5 history API to keep your UI in sync with the URL. It should be wrapped around the highest-level component that needs routing (in our case, the MyApp component in _app.js).

Routes and Route

Routes is a container for Route components. Route components define a specific path and the component to render when that path is matched. The path prop specifies the URL path, and the element prop specifies the React component to render. The Routes component ensures that only the first matching Route is rendered.

Link

Link is used for navigation. It renders as an <a> tag by default, but it intercepts clicks and prevents the default browser behavior (full page reload). Instead, it updates the URL and renders the appropriate component without reloading the entire page, providing a smoother user experience. The to prop specifies the path to navigate to.

Advanced Routing Concepts

Dynamic Routes

Dynamic routes allow you to create routes that match a pattern, such as /products/:productId. This is useful for displaying individual product pages, blog posts, or any other content where the URL structure is consistent, but the content varies.

Let’s create an example. First, create a new component called ProductDetail:

components/ProductDetail.js

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

function ProductDetail() {
  const { productId } = useParams();

  return (
    <div>
      <h2>Product Detail</h2>
      <p>Product ID: {productId}</p>
    </div>
  );
}

export default ProductDetail;

In this component, we use the useParams hook from react-router-dom to access the route parameters. useParams() returns an object of key/value pairs of URL parameters. In our case, it will contain the productId.

Now, update your pages/_app.js to include the dynamic route:

import '../styles/globals.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from '../components/Home';
import About from '../components/About';
import Contact from '../components/Contact';
import ProductDetail from '../components/ProductDetail';

function MyApp({ Component, pageProps }) {
  return (
    
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              About
            </li>
            <li>
              Contact
            </li>
            <li>
              Product 123
            </li>
          </ul>
        </nav>
        
          <Route path="/" element={} />
          <Route path="/about" element={} />
          <Route path="/contact" element={} />
          <Route path="/products/:productId" element={} />
        
      </div>
    
  );
}

export default MyApp;

Here, we’ve added a new route: /products/:productId. The :productId part is a route parameter. When the user visits a URL like /products/123, the productId parameter will be set to 123. We’ve also updated the navigation to include a link to the product detail page.

Now, when you navigate to /products/123, the ProductDetail component will render, and you’ll see “Product ID: 123”. You can change the number in the URL, and the productId will update accordingly.

Nested Routes

Nested routes allow you to create a hierarchical structure for your application’s navigation. This is useful for complex layouts, such as dashboards or applications with multiple sections.

Let’s create a simple example of nested routes. We’ll create a Dashboard component that has nested routes for /dashboard/overview and /dashboard/settings.

First, create the Dashboard component and its children:

components/Dashboard.js

import React from 'react';
import { Link, Routes, Route, Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li>
            Overview
          </li>
          <li>
            Settings
          </li>
        </ul>
      </nav>
      
    </div>
  );
}

export default Dashboard;

components/DashboardOverview.js

import React from 'react';

function DashboardOverview() {
  return (
    <div>
      <h3>Overview</h3>
      <p>This is the dashboard overview.</p>
    </div>
  );
}

export default DashboardOverview;

components/DashboardSettings.js

import React from 'react';

function DashboardSettings() {
  return (
    <div>
      <h3>Settings</h3>
      <p>Configure your dashboard settings here.</p>
    </div>
  );
}

export default DashboardSettings;

In the Dashboard component, we use the Outlet component from react-router-dom. The Outlet is where the child route components will be rendered. It acts as a placeholder for the nested routes.

Now, update your pages/_app.js to include the nested routes:

import '../styles/globals.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from '../components/Home';
import About from '../components/About';
import Contact from '../components/Contact';
import ProductDetail from '../components/ProductDetail';
import Dashboard from '../components/Dashboard';
import DashboardOverview from '../components/DashboardOverview';
import DashboardSettings from '../components/DashboardSettings';

function MyApp({ Component, pageProps }) {
  return (
    
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              About
            </li>
            <li>
              Contact
            </li>
            <li>
              Product 123
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
        
          <Route path="/" element={} />
          <Route path="/about" element={} />
          <Route path="/contact" element={} />
          <Route path="/products/:productId" element={} />
          <Route path="/dashboard" element={} >
            <Route path="overview" element={} />
            <Route path="settings" element={} />
          
        
      </div>
    
  );
}

export default MyApp;

In this example, we’ve defined a route for /dashboard that renders the Dashboard component. Inside the Dashboard component, we have links to /dashboard/overview and /dashboard/settings. These are nested routes. The Outlet component in the Dashboard component will render the appropriate child component based on the URL.

When you navigate to /dashboard/overview, the DashboardOverview component will be rendered inside the Dashboard component. Similarly, when you navigate to /dashboard/settings, the DashboardSettings component will be rendered.

Programmatic Navigation

Sometimes, you need to navigate to a different route programmatically, for example, after a form submission or a successful API call. react-router-dom provides the useNavigate hook for this purpose.

Let’s create an example. First, create a component called Login:

components/Login.js

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // In a real application, you'd make an API call to authenticate the user.
    // For this example, we'll just simulate a successful login.
    if (username === 'test' && password === 'password') {
      // Redirect to the home page after successful login.
      navigate('/');
    } else {
      alert('Invalid username or password');
    }
  };

  return (
    <div>
      <h2>Login</h2>
      
        <div>
          <label>Username:</label>
           setUsername(e.target.value)}
          />
        </div>
        <div>
          <label>Password:</label>
           setPassword(e.target.value)}
          />
        </div>
        <button type="submit">Login</button>
      
    </div>
  );
}

export default Login;

In this component:

  • We import the useNavigate hook.
  • We initialize the navigate function using useNavigate().
  • In the handleSubmit function, we simulate a successful login. If the username and password are correct, we call navigate('/') to redirect the user to the home page.

Now, update your pages/_app.js to include the Login component and a link to it:

import '../styles/globals.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from '../components/Home';
import About from '../components/About';
import Contact from '../components/Contact';
import ProductDetail from '../components/ProductDetail';
import Dashboard from '../components/Dashboard';
import DashboardOverview from '../components/DashboardOverview';
import DashboardSettings from '../components/DashboardSettings';
import Login from '../components/Login';

function MyApp({ Component, pageProps }) {
  return (
    
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              About
            </li>
            <li>
              Contact
            </li>
            <li>
              Product 123
            </li>
            <li>
              Dashboard
            </li>
            <li>
              Login
            </li>
          </ul>
        </nav>
        
          <Route path="/" element={} />
          <Route path="/about" element={} />
          <Route path="/contact" element={} />
          <Route path="/products/:productId" element={} />
          <Route path="/dashboard" element={} >
            <Route path="overview" element={} />
            <Route path="settings" element={} />
          
          <Route path="/login" element={} />
        
      </div>
    
  );
}

export default MyApp;

Now, when you navigate to the login page, enter the username “test” and the password “password”, and click the login button, you will be redirected to the home page.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Imports: Double-check that you’re importing the correct components from react-router-dom. For example, ensure you are importing BrowserRouter, Routes, Route, Link and any hooks like useParams or useNavigate.
  • Typographical Errors: Typos in your route paths can prevent your routes from working. Carefully review your paths in the Route components and Link components.
  • Missing BrowserRouter: The entire application that uses routing must be wrapped in a BrowserRouter. This is usually done in your _app.js file.
  • Conflicting Routes: If you have multiple routes that match a given URL, the first matching route will be rendered. Ensure your routes are defined in the correct order, with more specific routes appearing before more general ones.
  • Incorrect Use of Outlet: The Outlet component is only used in parent components of nested routes. Make sure you place the Outlet where you want the child component to render.
  • Deployment Issues: When deploying your Next.js application, ensure your server is configured to handle client-side routing. This usually involves configuring your server to serve the index.html file for all routes.

Key Takeaways

  • react-router-dom is a powerful library for handling navigation in your Next.js applications.
  • It provides advanced features like dynamic routes, nested routes, and programmatic navigation.
  • Use BrowserRouter to wrap your application, Routes and Route to define routes, and Link for navigation.
  • The useParams hook allows you to access route parameters, and the useNavigate hook allows you to navigate programmatically.
  • Carefully review your imports, route paths, and component placement to avoid common errors.

FAQ

1. How do I pass data between routes?

You can pass data between routes using a variety of methods:

  • URL Parameters: Use dynamic routes with parameters (e.g., /products/:productId) to pass data through the URL.
  • Query Parameters: Append query parameters to the URL (e.g., /products?id=123) and access them using the useLocation hook or the URLSearchParams API.
  • Context API or State Management Libraries: For more complex data sharing, use the React Context API or state management libraries like Redux or Zustand.
  • Local Storage or Session Storage: Store data in local storage or session storage and retrieve it in the target route. Be mindful of security and data size limitations.

2. How can I implement route protection?

You can protect routes by checking for authentication or authorization before rendering a component:

  • Using useNavigate: In the component, check if the user is authenticated. If not, redirect them to the login page using useNavigate.
  • Using a Wrapper Component: Create a wrapper component (e.g., PrivateRoute) that checks for authentication and conditionally renders a component or redirects to the login page.
  • Using Layouts: Implement layouts that conditionally render content based on authentication status.

3. How do I handle 404 errors?

To handle 404 (Not Found) errors:

  • Create a 404 Component: Create a component to render when a route is not found (e.g., pages/404.js).
  • Use a Catch-All Route: In your Routes component, define a route with a wildcard path (*) that renders your 404 component. This route should be placed last to ensure it only matches if no other route matches.

4. Can I use react-router-dom with Next.js’s file-system router?

While Next.js’s file-system router and react-router-dom can technically coexist, it is generally recommended to choose one routing strategy for consistency and maintainability. If you choose to use react-router-dom, you will typically disable Next.js’s file-system router by using _app.js to handle all routing.

5. How do I add transition animations between routes?

You can add transition animations between routes using libraries like framer-motion or react-transition-group. These libraries allow you to animate the transition of components as they enter and exit the screen.

With react-router-dom and its flexibility, you can craft a user experience that’s both intuitive and engaging. By understanding the core concepts and techniques, you’ll be well-equipped to create dynamic and complex navigation systems for your Next.js applications, leading to better user experiences and more maintainable code.

More posts