#Page inheritance

3 messages · Page 1 of 1 (latest)

naive ermine
#

Hello Astro community,

I'm facing an edge case in my development.

I have 2 paths:

  • /route-path-1
  • /route-path-2

for reasons too long to explain, I cannot use the file system routing with a route-path-[id].astro syntax.

I would like to know if there is any way to have a:

  • route-path.astro base file
  • route-path-1.astro file extending the route-path.astro base file and setting the id argument to 1
  • route-path-2.astro file extending the route-path.astro base file and setting the id argument to 2

I know this might be vey OOP style but my current case makes it impossible to have it differently.

I'd like to avoid :

  • copy/pasting the base file into the -1 and -2 files (obviously)
  • using symlinks instead of real files

Any suggestion/hint would be highly appreciated!

next fox
#

How about this?

Put a base file in a page with a _ prefix to exclude it from Astro's routes. (See https://docs.astro.build/en/core-concepts/routing/#excluding-pages)

---
// src/pages/_foo.astro
import Layout from '../layouts/Default.astro'
const { id } = Astro.params
---
<Layout>
  <h1>Foo #{id}</h1>
</Layout>

Then add individual page files as needed where you import and use the base file

---
// src/pages/foo-1.astro
import Foo from './_foo.astro'
---
<Foo id={1} />
naive ermine
#

That could work! thanks a lot @next fox

I'll give it a try.

BTW: it is Astro.props and not Astro.params right ?