DEV Community: Tanvir Ahammed

Fixing React Router Pagination Issue: How to Update URL Params with Buttons Instead of Links

Tanvir Ahammed — Sun, 27 Apr 2025 09:59:55 +0000

Hey Buddy,

I recently ran into a problem while building pagination for a table in a React app. My goal was to have pagination state (like page and pageSize) persist in the URL so the page doesn’t reset on refresh. You know, so if the user navigates away and comes back, they can see the same page of results they left off on. Easy, right? But React Router's Link component was causing me some trouble, so I had to come up with a workaround.

Let me walk you through what I encountered and how I solved it.

The Issue

I had a simple table with pagination. The idea was to update the URL whenever the user changed pages or adjusted the page size. This would make the table "bookmarkable" (i.e., a user could copy-paste the URL and return to the exact same page). Here's the catch: When using Link to update the page number in the URL, it wasn't working properly.

React Router’s Link is great for navigation, but when you try to control it manually (for example, using onClick to change URL params), it doesn’t handle everything the way I expected. Specifically, when I used Link to trigger pagination changes (like moving to the next page or switching page sizes), the URL didn’t update as expected, and the page didn’t reflect the right data.

The Solution

The solution was to ditch Link for the pagination buttons and instead use a button with navigate() from react-router-dom to manually handle the URL update.

Let’s break this down step-by-step.

Step 1: Create a Custom Hook for URL Params

First, I created a custom hook usePaginationParams that would handle updating the URL params based on the page and page size:

import { useNavigate, useLocation } from "react-router-dom";

function usePaginationParams() {
  const navigate = useNavigate();
  const location = useLocation();

  const updatePaginationParams = ({ page, pageSize }) => {
    const params = new URLSearchParams(location.search);

    if (page !== undefined) params.set("page", page);
    if (pageSize !== undefined) params.set("pageSize", pageSize);

    const newPath = `${location.pathname}?${params.toString()}`;
    console.log(newPath);  // Debugging: log the new URL

    navigate(newPath, { replace: true });  // Update the URL without reloading the page
  };

  return { updatePaginationParams };
}

export default usePaginationParams;

Step 2: Handling Pagination and Updating the URL

Next, I had to handle pagination in the table and update the URL whenever the user changed the page or page size. Instead of using Link for pagination buttons, I used a regular button and directly called navigate().

Here’s the relevant part of the code:

const TableContainer = ({ columns, data, total, pageIndex = 0, setPagination, customPageSize = 10 }) => {
  const { updatePaginationParams } = usePaginationParams();
  const [currentPage, setCurrentPage] = useState(pageIndex);

  // Handle page change
  const handlePageChange = (newPage) => {
    setCurrentPage(newPage);
    updatePaginationParams({ page: newPage + 1, pageSize: customPageSize });
    setPagination(newPage);  // Update pagination state
  };

  // Calculate pagination details
  const totalPages = Math.ceil(total / customPageSize);

  return (
    <div>
      <div>
        <button
          onClick={() => handlePageChange(currentPage - 1)}
          disabled={currentPage === 0}
        >
          Previous
        </button>
        {Array.from({ length: totalPages }, (_, index) => (
          <button
            key={index}
            onClick={() => handlePageChange(index)}
            className={currentPage === index ? 'active' : ''}
          >
            {index + 1}
          </button>
        ))}
        <button
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === totalPages - 1}
        >
          Next
        </button>
      </div>
    </div>
  );
};

Step 3: Explanation of the Fix

updatePaginationParams: This function is responsible for updating the URL with the new page and pageSize whenever the user navigates to a different page.
navigate(): Instead of using Link components, we directly call navigate() (from react-router-dom) to update the URL and avoid page reloads. This is what allows the page URL to stay in sync with the table's current state.
Buttons for Pagination: I replaced Link components with regular buttons (<button>). These buttons trigger the URL change using handlePageChange, which updates both the state of the page and the URL params. The disabled attribute prevents users from navigating beyond the available pages.
State Handling: The currentPage state keeps track of the active page, ensuring that the page navigation buttons reflect the current page in the UI.

Why This Works

Link vs Button: Link was not working as expected with onClick handlers for pagination because it’s built to handle navigation on its own. Adding custom behavior with onClick might interfere with its internal logic, especially when you’re trying to manipulate URL params manually.
navigate(): The navigate() function from react-router-dom is designed to update the URL without reloading the page. It’s exactly what we needed for our pagination because it allows us to change the URL params while keeping the user on the same page (without triggering a full reload).
Control over the URL: Using navigate() directly allows us full control over the URL and ensures it reflects the current page and page size, which is crucial for bookmarking and sharing URLs.

Conclusion

By replacing Link with button and using navigate() for manual URL updates, I was able to fix the pagination issue and ensure the URL stays in sync with the pagination state. It was a simple but effective solution, and it works seamlessly in React Router.

Now, when a user changes pages, the URL is updated accordingly, and the state persists even if the page is refreshed. I’m sharing this with you in case you run into a similar issue in your projects!

Hope this helps!

How I Solved the "MySQL Shutdown Unexpectedly" Error: A Step-by-Step Guide

Tanvir Ahammed — Sat, 30 Nov 2024 10:29:09 +0000

It's frustratingly annoying to experience the hated MySQL shutdown unexpectedly error when working with MySQL-especially if your development projects depend on it.

If you've been working on a project and suddenly faced the MySQL shutdown unexpectedly error, you're not alone. This issue can arise for many reasons, but in my case, after hours of debugging, I discovered the root cause: Physically writing the file full.

How I Fixed the Error

After extensive research and testing, I followed a methodical approach to repair the corrupted data files. Here's the step-by-step solution:

1. Navigate to the Data Directory
The first step is locating the MySQL data directory where all database files are stored. In XAMPP, this is usually:

C:\xampp\mysql\data\

2. Backup the Data

Before making any changes, it’s crucial to back up your files to prevent accidental data loss:

Copy all files from the C:\xampp\mysql\data\ directory.
Save them in a safe location as your backup.

3. Delete Corrupted Files

Next, remove the specific files causing the issue:

Delete all files with the name pattern aria_log.######## (e.g., aria_log.00000001).
Delete the ibtmp1 file in the same directory.

Note: These files are often temporary or log files that can be regenerated when MySQL restarts.

4. Restart MySQL

Once you've completed the steps above, restart MySQL from the XAMPP Control Panel. If everything went well, the server should start without any issues.

Why This Solution Works

Aria Logs: Deleting the aria_log.######## files removes any corrupted log data that may hinder MySQL's startup process.

Final Thoughts

Debugging MySQL errors can be a challenging task, but with patience and the right approach, most issues are solvable. By repairing corrupted data files and cleaning up unnecessary logs, I was able to fix the "MySQL shutdown unexpectedly" error and continue working on my project without interruptions.

If you're facing the same issue, I hope this guide helps you resolve it quickly. Don't forget to back up your data regularly to prevent future headaches!

Keyword Research Tools to Boost Your SEO Strategy

Tanvir Ahammed — Sat, 30 Nov 2024 08:20:21 +0000

Keyword research is the backbone of a good SEO strategy. It helps you identify what your audience is looking for and allows you to create content that resonates with their needs. But when there are so many tools available for keyword research, how do you choose one that will help you reach your goal?

In this post, we identify some of the best and how they can boost your SEO content.

Why Keyword Research Matters

Keyword research is more than just finding popular search terms. It's about-

Identifying your audience's intent.
Understanding the competition.
Find opportunities ranking for niche topics.

With the right tools, you can uncover insights that lead to better content, improved rankings, and more organic traffic.

Top Keyword Research Tools

1. Google Keyword Planner

A free and beginner-friendly tool, Google Keyword Planner is perfect for those just starting with SEO. It provides:

Search volume and competition data.
Keyword ideas based on your niche.
Insights into seasonal trends.

2. SEMrush

SEMrush is a powerhouse for SEO professionals. Its keyword research features include:

Detailed keyword difficulty scores.
Competitor analysis.
Related keywords and phrase matches.

3. Ahrefs Keywords Explorer

Ahrefs is another industry favorite. It offers:

In-depth keyword metrics like clicks and return rates.
Global search data for multiple countries.
Comprehensive competitor research.

4. Ubersuggest

Created by Neil Patel, Ubersuggest is great for small businesses and startups. Key features include:

Keyword suggestions and search volume data.
Backlink analysis.
Easy-to-read reports for beginners.

5. Moz Keyword Explorer

Moz provides actionable insights with its user-friendly interface. Features include:

Keyword difficulty scores.
Organic CTR (Click-Through Rate) analysis.
Prioritized suggestions based on your goals.

How to Choose the Right Tool

Not all tools are created equal, and your choice depends on your specific needs:

Budget: If you’re on a tight budget, tools like Google Keyword Planner and Ubersuggest are great starting points.
Depth of Analysis: For advanced research, tools like Ahrefs or SEMrush provide comprehensive data.
Ease of Use: Beginners might prefer simpler tools like Ubersuggest or Moz.

Pro Tips for Effective Keyword Research

Focus on Long-Tail Keywords: These are less competitive and more targeted.
Analyze Your Competitors: Use tools to see which keywords they rank for and identify gaps.
Track and Update Regularly: Keyword trends change, so revisit your research periodically.

Final Thoughts

Keyword research tools are essential for building a strong SEO foundation. Whether you’re a beginner or an experienced marketer, the right tool can help you uncover valuable insights to drive your strategy forward.

Which keyword research tool is your favorite? Let me know in the comments, and don’t forget to share this post if you found it helpful!

Building a File Upload API with Next.js and Google Drive Integration

Tanvir Ahammed — Wed, 27 Dec 2023 07:17:56 +0000

In this tutorial, we'll walk through the process of creating a serverless API using Next.js that allows users to upload files directly to Google Drive. We'll use the Google Drive API for file storage and Next.js for the serverless API endpoints.

Prerequisites

Before getting started, make sure you have the following:

- A Google Cloud Platform (GCP) project with the Google Drive API enabled.
- API credentials in the form of a service account key (JSON file).
- Node.js and npm installed on your development machine.

Setting Up the Project

Initialize a Next.js Project:

npx create-next-app my-drive-api
cd my-drive-api

Install Dependencies:

npm install googleapis multer stream

Api Code

// pages/api/googleDrive.js
import { google } from "googleapis";
const stream = require("stream");
import multer from "multer";
const apikeys = require("./apikeys.json");
const SCOPE = ["https://www.googleapis.com/auth/drive"];

export const config = {
  api: {
    bodyParser: false,
  },
};

// Function to authorize the Google Drive API
async function authorize() {
  const jwtClient = new google.auth.JWT(
    apikeys.client_email,
    null,
    apikeys.private_key,
    SCOPE
  );

  await jwtClient.authorize();

  return jwtClient;
}

// Multer storage configuration
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// API endpoint handler
export default async function handler(req: any, res: any) {
  if (req.method !== "POST") {
    return res.status(405).end(); // Method Not Allowed
  }

  try {
    await new Promise<void>((resolve, reject) => {
      upload.single("image")(req as any, res as any, (err) => {
        if (err) {
          return reject(err); // Reject if multer encounters an error
        }
        resolve();
      });
    });

    const uploadedFile = req.file;

    if (!uploadedFile) {
      return res.status(400).json({ error: "No file uploaded" });
    }

    const authClient = await authorize();
    const result: any = await uploadFile(authClient, uploadedFile);

    // Wait for a short delay (e.g., 2 seconds) before responding
    await new Promise((resolve) => setTimeout(resolve, 2000));

    const previewLink = `https://drive.google.com/uc?id=${result?.data?.id}`;

    res.status(200).json({ previewLink, id: result?.data?.id });
  } catch (error: any) {
    console.error(error);
    res.status(500).json({ error: error?.message ?? "Internal Server Error" });
  }
}

// Function to upload a file to Google Drive
async function uploadFile(authClient: any, uploadedFile: any) {
  return new Promise((resolve, reject) => {
    const drive = google.drive({ version: "v3", auth: authClient });

    const fileMetaData = {
      name: uploadedFile.originalname,
      parents: ["1rE3jBXCsPoABRPCyHhvHBqH9SxzzFzCm"],
    };

    drive.files.create(
      {
        resource: fileMetaData,
        media: {
          mimeType: uploadedFile.mimetype,
          body: stream.PassThrough().end(uploadedFile.buffer),
        },
        fields: "id",
      },
      (error: any, file: any) => {
        if (error) {
          return reject(error); // Reject if there's an error during file creation
        }

        // Set permissions to make the file public
        drive.permissions.create(
          {
            fileId: file.data.id,
            requestBody: {
              role: "reader",
              type: "anyone",
            },
          },
          (err: any) => {
            if (err) {
              console.error(err);
              return reject(err); // Reject if there's an error setting permissions
            }
            resolve(file);
          }
        );
      }
    );
  });
}

Image upload by NextJs Api in Public Folder

Tanvir Ahammed — Wed, 27 Dec 2023 05:02:58 +0000

** FIRST ENSURE THAT YOU HAVE NEXT JS PROJECT**

THEN INSTALL THESE PACKAGE

npm i multer
npm i path

BACK-END
api\upload.ts

import { NextApiRequest, NextApiResponse } from "next";
import multer from "multer";
import path from "path";
export const config = {
  api: {
    bodyParser: false,
  },
};
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const dateFolder = new Date().toISOString().split("T")[0]; // Use date as the folder name
    const uploadPath = path.join("./public/uploads", dateFolder);

    // Create the folder if it doesn't exist
    require("fs").mkdirSync(uploadPath, { recursive: true });

    cb(null, uploadPath);
  },
  filename: (req, file, cb) => {
    cb(
      null,
      `${file.fieldname}-${Date.now()}${file.originalname.substring(
        file.originalname.lastIndexOf(".")
      )}`
    );
  },
});

const upload = multer({ storage });

const uploadApi = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await new Promise<void>((resolve, reject) => {
      upload.single("image")(req as any, res as any, (err) => {
        if (err) {
          return reject(err);
        }
        resolve();
      });
    });

    // Access the 'file' property after the multer middleware processes the file
    const uploadedFile = req.file;

    if (!uploadedFile) {
      return res.status(400).json({ error: "No file uploaded" });
    }

    // Assuming the uploaded file is saved in the public/uploads folder
    const dateFolder = new Date().toISOString().split("T")[0];
    const fileName = uploadedFile.filename;
    const filePath = path.join("uploads", dateFolder, fileName);

    res.status(200).json({ message: "Image uploaded successfully", filePath });
  } catch (error) {
    console.log(error);

    res.status(500).json({ error: "Error uploading image" });
  }
};

export default uploadApi;

next.config.js

async rewrites() {
    return [
      {
        source: "/uploads/:path*",
        destination: "/uploads/:path*", // Adjust this path based on your project structure
      },
    ];
  },

** FRONT-END **
components\UploadForm.tsx

// Your React component

import React, { useState } from "react";

const UploadForm = () => {
  const [file, setFile] = useState<any>(null);

  const handleFileChange = (e: any) => {
    setFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append("image", file);

    try {
      const response = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (response.ok) {
        // Parse the JSON response
        const responseData = await response.json();

        // Access the data from the server
        console.log("Image uploaded successfully", responseData);
      } else {
        console.error("Error uploading image");
      }
    } catch (error) {
      console.error("Error uploading image", error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};

export default UploadForm;

FRONT-END UI

BACK-END UPLOADED FOLDER

How to set YouTube Video as Background in the Next.JS/React.Js app with styled component?

Tanvir Ahammed — Tue, 19 Sep 2023 10:33:49 +0000

VideoBackground.tsx

import React from "react";
import styled from "styled-components";

const VIDEO_WIDTH = 1920;
const VIDEO_HEIGHT = 1080;

const VideoBackgroundWrapper = styled.div`
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  @media (min-aspect-ratio: 16/9) {
    --video-height: 56.25vw;
  }

  @media (max-aspect-ratio: 16/9) {
    --video-width: 177.78vh;
  }
`;

const VideoIframe = styled.iframe`
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--video-width, ${VIDEO_WIDTH}px);
  height: var(--video-height, ${VIDEO_HEIGHT}px);
  transform: translate(-50%, -50%);
`;

export const VideoBackground = ({ videoId, className }: any) => {
  const yt = `https://www.youtube.com/embed/${videoId}?autoplay=1&controls=0&mute=1&loop=1&modestbranding=1&showinfo=0&enablejsapi=1&&widgetid=3&playlist=${videoId}`;
  return (
    <VideoBackgroundWrapper className={className ?? ""}>
      <VideoIframe
        width={VIDEO_WIDTH}
        height={VIDEO_HEIGHT}
        src={yt}
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      />
    </VideoBackgroundWrapper>
  );
};

app.tsx
export default function App() {
  return (
    <div className="video-layer">
      <VideoBackground
        className="image-layer"
        videoId={data?.videoId ?? "PtDIVU_tlo0"}
      />
    </div>
  );
}