So what's an intercepting route?
Well, an intercepting route is an alternative route,
which sometimes gets activated depending on
whether you are navigating to it
through an internal link from within the page.
So if you're in that single page application mode
and you're navigating around on the page,
or you are coming from an external link,
or you manually enter the URL or you reloaded the page
so that for the same path, different pages are shown
depending on how you got there.
That's the idea behind an intercepting route
because the intercepting route essentially intercepts
an internal navigation request
and instead of showing the page you would see
if you would reload the page or come to the page
from outside the website, a different page will be shown.
And I'll show that here at the example of this image page.
Currently we have just one page here,
and therefore whenever I view the details of an image,
I see this page.
No matter if I got there by clicking on that image
or if I got there by reloading the page,
I always see the same page.
Now, if I wanted to change this,
I could set up such a intercepting route
by creating a sibling folder to the page
I want to intercept though, that's not a hard requirement,
as you'll see in a second.
And by then, giving it a name that starts with opening
and closing parentheses,
so not square bracket or anything like that,
but instead regular parentheses.
And then after those parentheses, you repeat the name
of the path of the route you want to intercept.
So if I wanna intercept the image route here,
I have to add image after those parentheses.
And then between those parentheses, you basically have
to describe the path from this folder
and the path segment it represents
to the segment that should be intercepted.
So having the same name is not enough.
Instead, you also must describe the path
to get to that related folder.
And here, if it's in the same folder, that would be achieved
by adding a single dot.
Just as in a import path,
if you wanna import something from the same folder,
you could do that with ./
and then the name of the file that is in the same folder.
Now, if that intercepting route here would be set up
in some nested path folder, you would have to add
two dots here to go up one level.
Just as in an import,
if you need to go up one level to reach the file
you want to import from, you have to add two dots.
Now, this import thing was just an example,
but that is how you need to configure
this intercepting route folder name.
And of course, as always, you find all the details
in the official documentation and there you also see
how that would change if you would need to go up
multiple folder segments and so on.
But it's pretty common that you're in the same folder,
so that's probably the most important notation
you should memorize, having this notation here.
Well, now the idea is that you add a page.js file in there,
and now you define the page as it should be shown
if the navigation request was intercepted.
So if a user tried to visit this specific route
whilst already being on the website.
And for that here, I'll actually copy and paste the code
from the other image page.js file,
and maybe name this intercepted image page
and to see the difference here, I'll add an H2 element
above that diff, where I'll say intercepted
and wrap that all in a fragment.
And we'll make this more useful soon.
For the moment, I'll just add this so that we can see
on which page we are,
because now with those changes made, if you go back
and you reload, you see there is no intercepted text here.
But if I go to a news and I click on the image,
this text is there, and again, if I reload, it's not there.
So we see different content,
we actually get a different page.js file being loaded
depending on how we got to this page
and that's exactly the idea behind intercepting routes.
Now, this can sometimes be useful,
but it's especially a useful feature when combined
with parallel routes to, for example,
show the content in a modal if it's intercepted
or as a full screen page if you came there by reloading
or entering the link manually and that's what we'll do next.