Parallel Routes, the route give 404 not found when accessing it explicitly
Answered
HOTCONQUEROR posted this in #help-forum
As seen in the image, I was trying to create a parallel route between the main page and a specific blog being a modal, there is a specific folder structure when it come to creating a parallel route for modal, however when i open the modal, by using a
<Link> from the main page that route to the modal (blog/[id]) everything works fine, but if i try to reload that url (blog/[id]) it gives me 404 not found , why is this?101 Replies
i added a default.tsx
but still doesn't work
if more details are needed, tell me
@Jboncz
ima be honest, default.tsx placement in project is confusing me
So for this I would either have to setup a repro and play with it or you can provide me with a minimal reproduction and I can look. I dont know the answer cause I havent done something just like this
Remember parrellel routes are used specifically for rendering another route within a route without changing the url
let me spin up a new nextjs instance real quick
//import {useState, useEffect} from 'react'
import {useRouter} from 'next/router'
import { UUID } from 'crypto'
import { Blog } from '@/app/page'
import BlogClientComp from '../../../blog/page'
import { Modal } from '@nextui-org/react'
export default async function BlogModal({params}){
return(
<Modal size='3xl' className='h-[70%] ' hideCloseButton={true} isOpen={true}>
<BlogClientComp blog = {blog.data}/>
</Modal>
)
}This is
page.tsx inside (.)blog/[id] dynamic route inside @blog slot, remember that modals have their own setup for parallel routing, so you have to use intercepting route for blogI will post the other code from other folders after this message
//client component
'use client'
import { Blog } from "../page";
import {ModalContent, ModalHeader, ModalBody, ModalFooter, Button} from "@nextui-org/react";
import { useRouter } from "next/navigation"
import Image from "next/image";
export default function BlogClientComp({blog}){
const route = useRouter()
return(
<div className='flex justify-center'>
<ModalContent className=' flex p-10 overflow-y-scroll' >
{() => (
<>
<div className='flex w-[100%] justify-end'>
<div className=''>
<Button onClick={()=>route.back()} color="danger" variant="solid">
Close
</Button>
</div>
</div>
<ModalHeader className="flex flex-col justify-center items-center gap-8">
<Image className='rounded-md' alt='titleImage' src={blog?.image} width={600} height={600}/>
<div className='text-[20px] w-[65ch] text-center'>
How to create an Auth session using Django and React, Thanks
</div>
<div className=''>
{blog?._username}
</div>
<div className=''>
{new Date(blog?.created_at).toLocaleDateString('en-gb',{
year:'numeric',
month:'short',
day:'2-digit'
})}
</div>
<div className='flex w-[100%] flex-row gap-4'>
{blog?.tags?.map((tag:string)=>{
return <span key={tag}>#{tag}</span>
})}
</div>
</ModalHeader>
<ModalBody className='flex justify-center w-[100%] text-[16px] break-words whitespace-break-spaces '>
<div className='w-[65ch] text-justify'>
</div>
</ModalBody>
<ModalFooter>
<Button color="primary">
Action
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</div>
)
}this is the component of blog itself
it is used to render the modal content.
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
blogs,
children,
}: Readonly<{
children: React.ReactNode;
blogs: React.ReactNode
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<div>{children}</div>
<div>{blogs}</div>
</body>
</html>
);
}@Jboncz watching LOTR lol
take your time
i will be going back home anyway now, so it might take time to give you a response.
sounds good, dont forget to actually check back, nothing worse than being ghosted when helping 😄
also dont forget to mark the answer in that other thread if your satisfied with that answer
so it closes
Im working on trying to do what your wanting, just looking through documentation
Okay so I see what your saying about refreshing not showing it at the very least... this just seems like a really convoluted way to do this and its confusing
Why do you want the blog to be a parralel route like modal? Is there any 'reason'
@Jboncz Why do you want the blog to be a parralel route like modal? Is there any 'reason'
Easy accessibility to the things in main page/home page
User can: switch between blogs modals using an arrow (later will be implemented), if user want to stop reading article and want to search for something, they can just exit modal and navigate whatever they want in home page
User can: switch between blogs modals using an arrow (later will be implemented), if user want to stop reading article and want to search for something, they can just exit modal and navigate whatever they want in home page
TLDLR: easier accessibility to everything on the same page
So can it be a modal but not use parallel routes?
You want it to 'feel' like your on the same page... because in reality based on what your developing your really not
I mean you are and arent at the same time 😄
When you get home, can you show me how you are navigating to the blog modal page?
@Jboncz So can it be a modal but not use parallel routes?
There is 2 things here:
1. Having modal in totally separate page will just hinder the easy accessibility
2. Having modal being part of main page will be hard on the dev (me) to manage the components considering everything is condensed in one page.
To answer your statement about me not really having everything on the same page:
Technically it is 2 different pages, yes, but it is all about users feeling that they find everything in the same place,it is all about UX
1. Having modal in totally separate page will just hinder the easy accessibility
2. Having modal being part of main page will be hard on the dev (me) to manage the components considering everything is condensed in one page.
To answer your statement about me not really having everything on the same page:
Technically it is 2 different pages, yes, but it is all about users feeling that they find everything in the same place,it is all about UX
Parallel routes, meaning I have more than 1 route, which is true, but everything is presented in one place, and that is the goal.
I kind of understand WHY its happening, but not exactly sure how I would fix it yet. Its mostly to do with the fact that the parralel route on refresh doesnt have a concept of the intercepting route when you 'navigate' in nextjs it handles it behind the scenes. I do have a good minimal repro I can post after I do a little more troubleshooting attempts but im not sure how to go about this
its a dynamic route within a intercepting route within a parralel route 😂
Interesting read on something similar
@Jboncz its a dynamic route within a intercepting route within a parralel route 😂
Idk why modals setup is different than normal page setup when it comes to parallel routes
Answer
When I do this, at least when I refresh I dont get 404 instead I get the generic blogs page thats setup
@Jboncz Click to see attachment
I get that you just added a nested folder [id], mhm i will try this out
but the modal still doesnt pop
and you HAVE to have the page.js
because at that point for some reason its not dirrecting it along the parralel route
Before Refresh
After refresh
which isnt what you want
This example here : https://nextgram.vercel.app/ Which is a vercel example repo, does the exact same thing more or less lol
https://gitkit.me/ or if your using this site.... its almost intended
hit create account, then refresh your page
They look at what your seeing as a bug as a feature 😄
Whereas you want the modal to reopen, they WANT the page to render separately, then they are just using a regular component thats shared between the two files.
@Jboncz Whereas you want the modal to reopen, they WANT the page to render separately, then they are just using a regular component thats shared between the two files.
Gimme 10 mins and I will test everything, thanks
Then you can lazy load the blog modal.
@Jboncz If I was trying to do what you are wanting to do this is how I would personally do it
how do you detect if you hard loaded the current route?
if i figure this out, i think it will be solved
In the code I provided there?
no, like, in general
Whereas the page.js under @blog wouldnt be hardloaded
curious what you come up with when you do.
@Jboncz Whereas the page.js under @blog wouldnt be hardloaded
ik which one is soft loaded and which one is hard loaded, what i am asking this how do you detect that programatically?
like in code
you know what, let me see if this will work
If the code in the above screenshot runs its hard loaded. Its inherent, I dont know how else you could tell
@Jboncz If the code in the above screenshot runs its hard loaded. Its inherent, I dont know how else you could tell
allg, so i tried making that setup that you mention (adding [id] dynamic route), it worked on hard load there are 2 problems being presented now:
1. even on soft load, the modal style being applied is the one being in the hard-loaded file ([id]/page.tsx)
2. sound like
1. even on soft load, the modal style being applied is the one being in the hard-loaded file ([id]/page.tsx)
2. sound like
blog prop in the component being undefined when i hard load the route.You would have to decouple the modal from the blog post. and only render it as a modal if its on the soft load and if hard load it doesnt have the modal
This is guut
on soft load, image is retrieved from
I figured that on hard load, the server component won't actually be rendered?
blog prop, on hard load, image is not retrieved cause blog seems undefined.I figured that on hard load, the server component won't actually be rendered?
(server component, being inside the
@blogs/(.)blog/[id]/page.tsxWell it depends on what you put in the route that would signify a hard load
@Jboncz Well it depends on what you put in the route that would signify a hard load
so i will need another server component on the hard load?
Well.... you decouple the modal from the blog post so
softload
hard load
softload
<modal>
<blogpost>
<modal/>hard load
<blogpost>@Jboncz Well.... you decouple the modal from the blog post so
softload
<modal>
<blogpost>
<modal/>
hard load
<blogpost>
you still need to fetch the blog again on hard-load
yes. unless you cache it using unstable cache or something else.
many different caching strategies
@Jboncz yes. unless you cache it using unstable cache or something else.
i haven't done caching before, can it be done in frontend it to persist data being fetched from backend?
Hrmmmmm. The answer is yes.... but im trying to remember if you need to do anything or not for the fetching to work.
caching to work* sorry
@Jboncz Hrmmmmm. The answer is yes.... but im trying to remember if you need to do anything or not for the fetching to work.
i just realised, maybe having the modal being part of the main page/home page is a better idea 💀
@Jboncz Then you can lazy load the blog modal.
This is just soooo much less complex
@Jboncz Like my alternative example?
i haven't seen your example, but i will think about changing something here:
1. blog list is already in the main page, you click on it, it open a parallel route modal
2. i will change that so the blog being accessed is a modal being part of the main page
3. this will make it easier for me to switch between blogs using an arrow cause the mapping of blogs list already happen in main page
1. blog list is already in the main page, you click on it, it open a parallel route modal
2. i will change that so the blog being accessed is a modal being part of the main page
3. this will make it easier for me to switch between blogs using an arrow cause the mapping of blogs list already happen in main page
I mean your 'modal' could just be the entire page, so its essentially like overlayed, kinda trickery, reddit use to do that
I say you toss the parralel routes thing entirely just my opinion
@Jboncz I say you toss the parralel routes thing entirely just my opinion
parallel route idea is still there for 1 thing:
if user is not authorized to see comment section, the comment section will be replaced with login button, the login button would be a modal too, so that they don't have to go back and forth to re-access the blog modal they were reading.
if user is not authorized to see comment section, the comment section will be replaced with login button, the login button would be a modal too, so that they don't have to go back and forth to re-access the blog modal they were reading.
I also have user profile, so maybe, the user can open user profile modal inside the blog modal, they don't have to be redirected in an entire separate page.
and it works, cause if the user want to hard load, they can see the full page of user profile.
Gotcha, whatever you think is best!
This is the solution to the original problem.
case closed, thanks again.
Np
Was there any other threads you had open? Just checking.
that it.
all is solved.
cooleo, GL