#Different system from src/pages

1 messages · Page 1 of 1 (latest)

fallen jewel
#

Hello, can I use a different system from src/pages to generate all the routes? It would be awesome to have something like a list of path and component similar to the Angular routing system. If you have to create a complex and flexible routing system it's messy with the folder structure

(example of input)

const routes = [
  { path: 'page1', page: 'page.astro'}
  { path: 'page/about/team', page: 'page.astro'}
  { path: 'page/about/gallery', page: 'galleryPage.astro'}
  { path: 'es/sobre-nosotros/galeria', page: 'galleryPage.astro'}
  { path: 'tools/editor', page: 'editor.astro'}
  { path: 'tools/', page: 'page.astro'}
]
sacred fiber
#

Hi!
There's no built-in feature to change the routing system but you can have a set up to emulate what you want

#

One side effect of doing this will be that all JS and css from all pages will be loaded in every page pages
(which could hit performance a LOT)

fallen jewel
#

Thanks a lot for the answer. I see, Is there a way to import just a page? I found that you can do

export const getComponent = async () => {
  const importedPage = import.meta.glob('./all-pages/index.astro', { eager: true })
  const {default: Component} = importedPage['./all-pages/index.astro']
  return Component
};

but this doesn't work when you use a var in the glob method, for example this throws an error

export const getComponent = async (page) => {
  const pageURL = `./all-pages/${page}.astro`
  const importedPage = import.meta.glob(pageURL, { eager: true })
  const {default: Component} = importedPage[pageURL]
  return Component
};