#multiple wildcards in the url

15 messages · Page 1 of 1 (latest)

minor moat
#

How can I have multiple wildcards in the URL?

For example, I can do src/pages/resources/[resource].astro and I get to the right page, but when I try src/pages/resources/[resource]/posts/[post].astro I'm getting a 404.

chrome pastureBOT
#

Hi @minor moat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro allows you to have multiple wildcards in the URL. However, the issue you're facing might be due to the way you're structuring your directories and files.

In Astro, the file structure in the src/pages directory directly corresponds to the URL structure. So, if you want to have a URL like /resources/[resource]/posts/[post], you should structure your directories and files like this:

src/
  pages/
    resources/
      [resource]/
        posts/
          [post].astro

In this structure, [resource] and [post] are dynamic segments that will match any string.

Also, remember that Astro has a specific order of precedence for routes. For example, static routes without path parameters will take precedence over dynamic routes. So, if you have a file named create.astro under posts/, it will take precedence over [post].astro.

You can find more information about dynamic routing in Astro in the Astro documentation (https://docs.astro.build/en/guides/routing/#dynamic-routes).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@minor moat kapa.ai is still learning and improving, please let us know how it did by reacting below

minor moat
#

@chrome pasture Can I have 2 different files for 2 different scenarios?
For example: src/pages/resources/[resource].astro is one file that get's called when the url is /resources/[resource]
but src/pages/resources/[resource]/posts/[post].astrois a second file that get's called when the url is /resources/[resource]/posts/[post].

Is that possible?

chrome pastureBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, it is possible to have two different files for two different scenarios as you described.

In Astro, the file structure in the src/pages directory directly corresponds to the URL structure. So, if you want to have a URL like /resources/[resource] and /resources/[resource]/posts/[post], you should structure your directories and files like this:

src/
  pages/
    resources/
      [resource].astro
      [resource]/
        posts/
          [post].astro

In this structure, [resource] and [post] are dynamic segments that will match any string. The file [resource].astro will be used when the URL is /resources/[resource], and the file [post].astro will be used when the URL is /resources/[resource]/posts/[post].

You can find more information about dynamic routing in Astro in the Astro documentation (https://docs.astro.build/en/guides/routing/#dynamic-routes).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@minor moat kapa.ai is still learning and improving, please let us know how it did by reacting below

minor moat
#

@chrome pasture That is the exact structure I'm using, and yet when the url is /resources/[resource]/posts/[post] I'm getting a 404

chrome pastureBOT
#

Let me check the knowledge base for you. One moment! :books:

#

If you're getting a 404 error, it could be due to a few reasons:

  1. The values you're using for [resource] and [post] might not correspond to any existing files or directories. Make sure that the values you're using in the URL actually exist in your file structure.

  2. There might be an issue with the way you're defining your routes in your Astro files. In your Astro files, you can access the dynamic segments of the URL using Astro.params. For example, in your [post].astro file, you can access the resource and post parameters like this:

---
const { resource, post } = Astro.params;
---
<h1>{resource}: {post}</h1>
  1. There might be an issue with the way your server is configured. If you're using Server-Side Rendering (SSR), dynamic routes are not built ahead of time, and the page will be served to any matching route. If you're using SSR, you should not use getStaticPaths.

If none of these suggestions solve your issue, I recommend checking out the Astro documentation on routing (https://docs.astro.build/en/guides/routing/) for more information. If you're still having trouble, you might want to ask for help in the #support channel on the Astro Discord server (https://astro.build/chat).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@minor moat kapa.ai is still learning and improving, please let us know how it did by reacting below

minor moat
#

@chrome pasture actually, that structure works. It was a typo on my side. I'll leave this here for anyone else who might come across it.

chrome pastureBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm glad to hear that your issue was resolved and the structure works as expected! It's great that you're leaving this here for others who might encounter the same problem.

Remember, in Astro, the file structure in the src/pages directory directly corresponds to the URL structure. So, if you want to have a URL like /resources/[resource] and /resources/[resource]/posts/[post], you should structure your directories and files like this:

src/
  pages/
    resources/
      [resource].astro
      [resource]/
        posts/
          [post].astro

In this structure, [resource] and [post] are dynamic segments that will match any string. The file [resource].astro will be used when the URL is /resources/[resource], and the file [post].astro will be used when the URL is /resources/[resource]/posts/[post].

For more information about dynamic routing in Astro, you can refer to the Astro documentation (https://docs.astro.build/en/guides/routing/#dynamic-routes).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: