At the moment in this application here,
whenever I pick one of my years here,
I see the articles that belong to the year,
but of course my navigation here,
these years disappear and I also can't dive in deeper
and, for example, pick a month
for which I want to view the news.
Now, we could try to solve that
by adding some kind of layout here, some nested layout,
that belongs to this parallel route,
but I'll actually solve it by using
yet another feature NextJS offers.
I'll fix this problem
by turning this dynamic route here
from a standard dynamic route into a catch all route.
Now we can do that
by actually using two square brackets
instead of just one pair of square brackets
and by adding three dots here in front of some identifier
of your choice,
and here I'll rename that identifier to filter.
Now that might look a bit weird,
but what this will actually do is it will make sure
that this page.js file
inside of that strangely named folder
will be activated for any path segments after archive
in this case.
No matter how many segments we have there,
and no matter how they're named.
Inside of this page.js file,
this params value there for also changes
or this property here changes.
We no longer have a year property here
because I renamed this to filter.
So even though we have these three dots in front of it,
we can actually still access the actual value
that will be encoded in the URL,
but the name is now filter because I changed the name.
However, filter now also isn't a single value anymore.
Instead it's a catch all route
and it catches all path segments after archive,
which could be no segments at all if we just visited
/archive and then nothing after that,
but it could be one segment if we visited /archive/2024.
Or two segments if we visited /archive/2024/three
to show the news for the month March and so on.
So filter will give us an array
of all the matched segments
and therefore I'll rename my constant here to filter.
And to understand how it works,
I will console.log(filter) here
and I will temporarily comment out this part here
because it won't work right now,
and I'll instead return just some dummy paragraph
so that we return something.
Now with those changes made,
you should actually get an error here in the terminal
where you ran your development server,
or at least you should get one,
if you stop it and you try to restart it.
You should get an error that you cannot define a route
with the same specificity as a optional catch all route.
Now what this means in the end
is just that now we have two conflicting page.js files.
Because I just mentioned this part here
and therefore this page will catch all the segments,
all the path segments, after archive.
But we try to load this page.js if we visit /archive,
but we now also try to load this page.js file.
And that won't work,
therefore, I will actually grab this header here
and cut that from this page.js file,
which is directly in at archive and get rid of it here
and instead go to my nested page.js file,
which is in that filter folder
and output that there, this header.
Of course, I still need to get my links here
and therefore I'll still call getavailableNewsYears.
Just as before.
That does not change.
And we also still must make sure
that this link component from next link is imported.
But with that, we now have just one page.js file
in this parallel route,
and it's that one file that will now be loaded
no matter which path segments
or how many path segments we have after /archive.
With that change made,
if you now save this and you restart the development server,
it should now restart without an error again,
and if you reload /archive,
you should again see that list,
but you should now also see some log here,
which at the moment says undefined in the terminal
where you started the development server,
and that log is coming from this line here.
Now it should say something else than undefined
if you visit 2024.
Then you should actually get an array here,
which includes the string 2024.
Because I mentioned this filter property here
will now hold an array of all the matched path segments.
And that's also why the page itself didn't change now
because it's now always the same page
we're showing for all these different segments.
But of course we can now use that data,
that filter array data, to update what we see on the page.