Now let’s try adding more pages to your Astro site.
about.astro file under
This file will create a new page that listens on the route
If you visit http://localhost:4321/about, it works:
It shows a blank page, but no error like you’d get if you went to a route not defined, for example http://localhost:4321/test:
Now you could add a simple HTML tag to the component, like we did before with the Test component:
If you open the DevTools you’d see a simple HTML structure, without all the
<body> tags and everything that makes an HTML page “correct”:
(the DOCTYPE and the script were added by Astro automatically)
You could now add the HTML directly in the component:
But what you’d usually do is use a layout:
--- import Layout from '../layouts/Layout.astro' --- <Layout title='About'> <p>test</p> </Layout>
src/layouts/Layout.astro will provide the base markup shared with
This is a common way to have a base layout.
You can have multiple layouts, for example if you want to have a layout for single pages, and a different one with a sidebar for blog posts. I have 4 different layouts in my site.
To link pages with each other we use plain HTML
So we can link back to
--- import Layout from '../layouts/Layout.astro' --- <Layout title='About'> <p>test</p> <a href="/">back to the home page</a> </Layout>
Astro does not provide client-side navigation by default, so all links do a full-page refresh, like it happens in plain HTML pages.
However you can easily add view transitions to add client-side navigation, as we’ll see later.
Lessons this unit:
|1:||Your first Astro site|
|2:||The structure of an Astro site|
|4:||▶︎ Adding more pages|
|6:||Markdown in Astro|
|9:||CSS in Astro|
|11:||Client-side routing and view transitions|
|12:||SSR in Astro|
|13:||API endpoints in Astro|
|14:||Managing forms in Astro COMING SOON|