skip sub-path in link component
Answered
Chinese perch posted this in #help-forum
Chinese perchOP
Is there a way i can skip a sub-path because its dynamic and i dont want to get the data for it everyime so can i do:
<Link href={"/**/dashboard"}>
or something similar?
<Link href={"/**/dashboard"}>
or something similar?
Answered by B33fb0n3
So with internationalization it would look like this:
So if you are on
And you link to
You will be redirect to
Without rewriting
Or if you need to provide a path beginning with
And you link to
You will be redirect to
Your middleware will catch, that there is no internationalization in it and redirect to
So if you are on
https://localhost:3000/en/world/mainAnd you link to
world/secondYou will be redirect to
https://localhost:3000/en/world/secondWithout rewriting
en again.Or if you need to provide a path beginning with
/ you can do it like that:https://localhost:3000/en/world/mainAnd you link to
/world/secondYou will be redirect to
https://localhost:3000/world/secondYour middleware will catch, that there is no internationalization in it and redirect to
https://localhost:3000/en/world/second27 Replies
@Chinese perch Is there a way i can skip a sub-path because its dynamic and i dont want to get the data for it everyime so can i do:
<Link href={"/**/dashboard"}>
or something similar?
the only thing that I know is, that you can repeat the last section of the url and then add a new one.
So if you are on
And you link to
You will be redirect to
Without rewriting
So if you are on
https://localhost:3000/hello/world/mainAnd you link to
world/secondYou will be redirect to
https://localhost:3000/hello/world/secondWithout rewriting
hello again.Chinese perchOP
hmmm
The issue is that i just implemented internationalization
@Chinese perch The issue is that i just implemented internationalization
normally your middleware handles the path for the internationalization 🤔
Chinese perchOP
and to get the locale i would need to be in a server component because it needs to be awaited so i can then use the locale in the link
yes, it does
my issue is with normal links
when the path was before:
localhost:3000/dashboard
it doesnt work anymore but should be:
localhost:3000/(locale)/dashboard
localhost:3000/dashboard
it doesnt work anymore but should be:
localhost:3000/(locale)/dashboard
Can’t you use useParams() to get it in client components?
@Chinese perch and to get the locale i would need to be in a server component because it needs to be awaited so i can then use the locale in the link
So with internationalization it would look like this:
So if you are on
And you link to
You will be redirect to
Without rewriting
Or if you need to provide a path beginning with
And you link to
You will be redirect to
Your middleware will catch, that there is no internationalization in it and redirect to
So if you are on
https://localhost:3000/en/world/mainAnd you link to
world/secondYou will be redirect to
https://localhost:3000/en/world/secondWithout rewriting
en again.Or if you need to provide a path beginning with
/ you can do it like that:https://localhost:3000/en/world/mainAnd you link to
/world/secondYou will be redirect to
https://localhost:3000/world/secondYour middleware will catch, that there is no internationalization in it and redirect to
https://localhost:3000/en/world/secondAnswer
@joulev Can’t you use useParams() to get it in client components?
Chinese perchOP
sounds like a great idea, letme try it real quick
@joulev Can’t you use useParams() to get it in client components?
Chinese perchOP
okay so that worked! Thanks for that
but i will have a look in my middleware tho
Because its quite tedious to do useParams in every file i want to use a link component
yea, joulev's way is a fast way. The way I mentioned is an effective way
Chinese perchOP
do you know how i can default export these 2? because i need the auth and the intl:
import { authMiddleware } from "@clerk/nextjs"
import createMiddleware from "next-intl/middleware"
export default authMiddleware({
// Allow signed out users to access the specified routes:
publicRoutes: ["/", "/api/getCollabToken/[userId]"],
ignoredRoutes: ["/tutorial/(.*)", "/api"],
})
export default createMiddleware({
// A list of all locales that are supported
locales: ["en", "de"],
// Used when no locale matches
defaultLocale: "en",
})
export const config = {
// Match only internationalized pathnames
matcher: [
"/((?!.+\\.[\\w]+$|_next).*)",
"/(api|trpc)(.*)",
"/",
"/(de|en)/:path*",
],
}(before i removed the export default from the authMiddleware but then this error came:)
Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The `notFound()` function will be called as a result.I am not into clerk middleware, sorry. If you know how to check for public and dingoredRoutes inside a normal middleware, you can directly add the internationalization part to it. Like that you merged both actions in one middelware
Chinese perchOP
Still thanks a Lot tho ❤️
@Chinese perch Still thanks a Lot tho ❤️
happy to help. Please mark solution
Chinese perchOP
Doesnt Work on Phone 😭
Chinese perchOP
Yep but then it says no commands available
lol @joulev would you mark the correct message?
Chinese perchOP
I already refreshed the app
thanks