Guide on handling 404 page redirection within an axios service in Next.js

Currently, I am utilizing axios to handle my API calls. One thing that I want to achieve is checking the status of the response received from the api and potentially redirecting to a 404 page based on that.

const api = axios.create({
  headers: {
    common: {
      'Content-Type': 'application/json'
    },
    post: {

    }
  }
});
api.interceptors.response.use(
  ...

  (error) => {
const code = parseInt(error.response && error.response.status)
     if (code === 404) {
          console.log("responsive",error)
          if(data){
            data.forEach(itemError => {
              toast.error(itemError, {
                theme: 'colored',
              });
            });
          }else{
            //Even though I attempted to redirect to the 404 page here, unfortunately it did not work as expected.
            //return window.location.href = '/404';
          }
...

I'm currently facing the challenge of figuring out how to successfully implement the redirection within this context.

Answer №1

Make sure to utilize the useRouter hook by referencing https://nextjs.org/docs/api-reference/next/router

Initialize the router within your functional component.

const router = useRouter();

You can then easily redirect to any page with this code snippet:

router.push('your-page')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoiding the issue of multiple submissions in Ajax forms

My website's contact form sometimes experiences a delay in sending submissions. When users, in their impatience, click the submit button multiple times, it results in the form being sent repeatedly to the host. To address this issue, I attempted to ...

Verify whether the div contains a specific class before triggering the animation

I'm attempting to create an animation following a user interaction with the Owl Carousel drag feature. The issue I'm encountering is that the code referencing $(this) does not recognize the .nav-item element with the .active class. Any insights ...

Is there a way to access the Express parameters within my React component?

Currently, I am in the process of developing a React application that utilizes Express as its back-end infrastructure My express route is configured as follows app.get('/manage/:id', (req, res) => { // redirect to react application }); ...

Combine an array of objects that are dynamically created into a single object

Having trouble transforming the JSON below into the desired JSON format using JavaScript. Current JSON: { "furniture": { "matter": [ { "matter1": "Matter 1 value" }, { "matter2": "Matter 2 value" }, { ...

Creating a JSX.Element as a prop within a TypeScript interface

I need to create an interface for a component that will accept a JSX.Element as a prop. I have been using ReactNode for this purpose, but I am facing issues when trying to display the icon. How can I resolve this issue? export interface firstLevelMenuItem ...

What is the correct way to utilize drei's useGLTF function?

Despite following the react-three docs and various examples, I am struggling to get drei useGLTF to function properly in my project. I have a basic Next|React|react-three/fiber project that I built from scratch. My goal is to load the astronaut example an ...

POST data not being sent via AJAX

I am trying to use AJAX to submit form data to a PHP function, but it seems like the data is not being transmitted. Here is the code for the HTML Form: <form onSubmit="return registration();" id="registration_form"> <input type="email" id="e ...

What could be the reason why modifications made to $scope in a directive's link function do not appear on the user interface?

The AngularJS directives' link function causes changes to isolate scope data that are not reflected in the UI. Take a look at this example: var myApp = angular.module('myApp', []); myApp.directive('myDirective', function () { ...

Using Vue.js: Passing an object from data() to a mounted() function

I'm facing an issue while attempting to pass the grid array to the createGridChart. An error message stating "grid is not defined" keeps popping up: “grid is not defined”. export default { data() { return { grid: [], } ...

Identifying functions that contain dots in their names using JSHint

While running jshint on a JavaScript file, I encountered functions with dots in their names for namespacing purposes. Specifically, within the d3 library, there is a significant portion of code that resembles: d3.select("something") Should I simply disab ...

Incorporating Chip into a Material-UI DataGrid column

I'm having trouble displaying data of a specific column inside a chip. I attempted to use the Chip component in my code: StackBlitz Demo Web Link: Live Demo I tried to incorporate it using: import Chip from '@mui/material/Chip'; but c ...

Is there a way to load and play different sounds on multiple audio players based on the length of an array?

I am attempting to load various sounds (.mp3 audio) on separate audio players that are displayed on a single HTML page. The number of players displayed on the screen is determined by the length of the array. In this specific example, I have 3 elements in t ...

What is the best way to locate the final text node within the <p> element?

Looking at the code below, my goal is to identify and retrieve the text node that serves as the last child element. <p class="western" style="margin-bottom: 0.14in"> <font color="#000000"> <font face="Arial, serif"> <font ...

Having trouble populating the container with page content using AJAX, PHP, and JS?

Whenever I attempt to use the buttons to change the content, I keep receiving a 'There is no such page!' message. Below is the index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- ...

Troubleshooting Axios Authorization Issue in VueJS and Django Integration

I am currently working on a project that involves VueJS, Django, and Graphene-Django for GraphQL integration. Authentication is functioning properly as I am able to obtain a JWT Token. However, when attempting to use this token for other authenticated que ...

Patience is key when waiting for the outcome of an async Javascript function in order to obtain a result (Could it be

Hey there, I've been searching for a solution to my problem even though it's been discussed before. I'm trying to achieve something simple: creating a string like distance is : " + CalculateDistance(position);. The desired result should look ...

Difficulty with Angular JS` ng-repeat functionality

I attempted to create a sample similar to the ones found on https://angularjs.org/ Here is the JS fiddle I put together. Could someone provide assistance? What seems to be the issue? The HTML code is as follows: <h2> To Do </h2> <div ng- ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

Macy.js, a masonry library, experiences compatibility issues with Internet Explorer 11. However, the problem can be resolved by activating "inspect mode"

Having an issue with macy.js on my website. The masonry element doesn't work on IE11 initially, but when I toggle the "inspect element" feature on and off, it starts working suddenly. Is there a way to trigger it automatically right after the website ...

Transforming a Python list into a JavaScript array

Hey there, I'm in the process of creating a JavaScript array of dates to input into a jQuery datepicker addon. Here is my Django view: def autofill_featured(request): show_id = request.GET.get('show_id') show = Show.objects.get(id=s ...