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

ScrollReveal.js won't function as intended

Show the MySQL query results in a pop-up alert box

Ways to modify React icons upon clicking them?

Proceed with executing the function only if the current date is before the specified date

Showcasing diverse content with an Angular Dropdown Menu

JavaScript does not recognize Bootstrap classes

How can I efficiently locate identical sequences of cells in two or more arrays?

Retrieve the string saved in a ViewBag when the ajax call is successful

The Geocoder.geocode() method returns XML instead of JSON when invalid credentials are provided

What is the best way to evaluate two objects with varying data types?

Incorporating telepat-io into a Java Struts enterprise solution

Transmit analytical data to an external domain without expecting a reply

Component inexplicably rendering multiple times

Tips for accessing the current state/value in a third-party event handler?

An error occurs in the console stating 'Maximum call stack size exceeded' when trying to add data to the database using JavaScript

JQuery not functioning properly within a dynamically loaded AJAX section

Ways to activate a function upon validation of an email input type

Swiper: What methods can be used to classify the nature of an event?

Developing Reactive Selections with Material-UI is made easy

I am having trouble locating my TypeScript package that was downloaded from the NPM registry. It seems to be showing as "module not found"