Oops! Next JS encountered an unhandled runtime error while trying to render the route. The

Question

Oops! Next JS encountered an unhandled runtime error while trying to render the route. The

I keep receiving the error message

Unhandled Runtime Error Error: Cancel rendering route

Within my navBar, I have implemented the following function:

const userData={
    id:1,
    email: "",
    name: "",
    lastName: "",
    photo: "",
    token: "",
    onLine: false
}

const router = useRouter();
const logOut = () => {
    dispatch( setUserLogged(userData) )
    router.push('/');
}

I am using

import { useRouter } from 'next/router';

as well.

Including a button in my navBar:

<Link href="#" onClick={()=>logOut()} >
   Log out
</Link>

By clicking on the "Log out" button in the navBar, the logOut function is called and then I encounter the

Unhandled Runtime Error Error: Cancel rendering route

issue. What could be causing this error?

javascript next.js router

Answer 1

Answer №1

You triggered an error by using router.push on a Link element without handling its event properly.

To fix this issue, make sure to include e.preventDefault() in your Link tag like so:

<Link href="#" onClick={(e)=> {
 e.preventDefault();
 logOut();
} >
 Log out
</Link>

Answer 2

You triggered an error by using router.push on a Link element without handling its event properly.

To fix this issue, make sure to include e.preventDefault() in your Link tag like so:

<Link href="#" onClick={(e)=> {
 e.preventDefault();
 logOut();
} >
 Log out
</Link>

Oops! Next JS encountered an unhandled runtime error while trying to render the route. The

Answer №1

Similar questions

"What is the best way to ensure that a random array value is printed accurately within an If/Else statement in my Text Adventure

"Implementing a feature in React JS react-table to dynamically add a new column when a

Animating the smooth collapse of panels within listviews

Is it possible to retrieve real-time scores of the players from espncricinfo through Node.js with the help of Cheerio parser?

Using JavaScript and jQuery to compare two JSON objects, then storing the result in a separate object

filter supabase to only show items with numbers greater than or equal to a

An issue arose during the page prerendering process for "/" on Vercel | Next.js resulting in a deployment error

A pop-up window displaying an electron error message appears, but no errors are logged in the console

Incorporating a dynamic URL within a script tag with AngularJs

Clearly defined form field even with the inclusion of value=" "

Codeigniter session unexpectedly ends after AJAX call completes successfully

Transforming a vertical table into a horizontal layout

Using NodeJS to Send JSON Data via HTTP POST Request

Retrieve the node environment variable within a JavaScript file

Display a preview image at the conclusion of a YouTube video

comparing multiple values separated by commas with JavaScript

How to automatically redirect empty routes to a specific route in Next.js

Showing a series of JavaScript countdowns consecutively

Creating a custom function in JavaScript to interact with the `windows.external` object specifically for use

Drop down menus fail to appear after the screen has been resized