Next.js 13's App Router experiences a 404 error when refreshing due to the parallel route modal configuration

Question

Next.js 13's App Router experiences a 404 error when refreshing due to the parallel route modal configuration

I am attempting to create a modal using parallel routes in Next.js version 13.4.

Everything functions properly when I am on the homepage (/) and open the modal by navigating to /login.

However, if I refresh the /login page, instead of displaying the homepage with the modal, it shows a 404 error page along with the modal:

https://i.sstatic.net/z1BP6.png

This is the structure of my folders:

https://i.sstatic.net/lmsQP.png

This is @overlays/login/page.tsx:

'use client';

import {useRouter} from 'next/navigation';
import {Dialog} from '@mui/material';

export default function Page() {
    const router = useRouter();

    return (
       <Dialog
          open
          onClose={router.back}
          keepMounted
          disablePortal
       >
          Hello
       </Dialog>
    );
}

Is there a way to display the home page (/) when directly accessing the parallel route /login?

javascript next.js next.js13 react-server-components app-router

Answer 1

Answer №1

If you're facing a 404 error, it's possible that you are missing the file @overlays/default.tsx:

export default function Default() {
  return null;
};

You can find more information about this in the documentation for Parallel Routes > Unmatched Routes:

Unmatched Routes

When no matching route is found, Next.js will render content based on routing techniques and folder structures.

[...]

Reload

In case of an unmatched route, Next.js attempts to render the default.js file in the slot first. If that's not available, a 404 error is displayed.

If your intention is to prevent the modal from being accessed as a standalone page, which is discussed as one of the main use cases in the documentation, consider using router interception:

For example, you may want to display a login modal in a top navbar without a dedicated /login page, or show a shopping cart in a side modal.

To redirect from /login to / when directly accessed, utilize router interception to render a different component handling redirection, like this:

app
  (home)
  login
    page.tsx <= LoginPage
  @overlays
    login
      page.tsx <= LoginModal
    page.tsx

Ensure that login/page.tsx contains the following code snippet:

import { redirect } from 'next/navigation'

export default function LoginPage() {
  redirect('/')

  return null;
};

Answer 2

If you're facing a 404 error, it's possible that you are missing the file @overlays/default.tsx:

export default function Default() {
  return null;
};

You can find more information about this in the documentation for Parallel Routes > Unmatched Routes:

Unmatched Routes

When no matching route is found, Next.js will render content based on routing techniques and folder structures.

[...]

Reload

In case of an unmatched route, Next.js attempts to render the default.js file in the slot first. If that's not available, a 404 error is displayed.

If your intention is to prevent the modal from being accessed as a standalone page, which is discussed as one of the main use cases in the documentation, consider using router interception:

For example, you may want to display a login modal in a top navbar without a dedicated /login page, or show a shopping cart in a side modal.

To redirect from /login to / when directly accessed, utilize router interception to render a different component handling redirection, like this:

app
  (home)
  login
    page.tsx <= LoginPage
  @overlays
    login
      page.tsx <= LoginModal
    page.tsx

Ensure that login/page.tsx contains the following code snippet:

import { redirect } from 'next/navigation'

export default function LoginPage() {
  redirect('/')

  return null;
};

Answer 3

Answer №2

I encountered a similar issue recently. It turned out that the solution was to have a default.tsx file in the @modals folder (or @overlays folder in your case). I mistakenly placed it in the /app directory instead of /app/@modals.

You can learn more about this issue by visiting: parallel routes - default.js

The content of the default.tsx file should look like this:

export default function Default() {
  return null;
};

Answer 4

I encountered a similar issue recently. It turned out that the solution was to have a default.tsx file in the @modals folder (or @overlays folder in your case). I mistakenly placed it in the /app directory instead of /app/@modals.

You can learn more about this issue by visiting: parallel routes - default.js

The content of the default.tsx file should look like this:

export default function Default() {
  return null;
};

Next.js 13's App Router experiences a 404 error when refreshing due to the parallel route modal configuration

Answer №1

Answer №2

Similar questions

Press the button to activate the function

How can tick values be displayed on a c3js line chart when all data is unselected?

Encountering module resolution issue following npm-link for the shared component repository

Guide on sending a JavaScript function to a Pug file using Node.js and Express

Integrate the dForm plugin with a convenient time picker widget

Creating packing features specifically designed for resolution within a reusable module

Acquiring the underlying code of websites within the local network

Struggling with AngularJs as I attempt to retrieve my Twitter timeline. It's been a challenge

Exploring the Power of JQuery and Iterating with For-

How to place an element in a specific location within the DOM using JavaScript

Steps for retrieving the identifier of a duplicated element

Having trouble with clearInterval in my Angular code

Error encountered while trying to load component: template or render function is not defined

Using TypeScript's reference function within an HTML document

There was a TypeError encountered while attempting to read the 'useState' properties of null for the swiper and next.js 13 modules

How to add 1 to the final element in a JavaScript

Analyzing information through jsonParse

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

JavaScript functions are not being triggered when the submit button is clicked

The call function in Tween.js fails to execute after adding an EventListener