openElement 使用文件系统路由。路由模块导出页面定义，框架负责接入 params、data、metadata 和 app shell 渲染。
| 文件 | URL |
|---|---|
app/routes/index.tsx | / |
app/routes/about.tsx | /about |
app/routes/posts/[slug].tsx | /posts/:slug |
import { definePage } from '@openelement/app';
export default definePage({
route: { path: '/about' },
head: { title: 'About' },
render() {
return <main>About</main>;
},
});import { definePage } from '@openelement/app';
export default definePage({
route: { path: '/posts/[slug]', params: ['slug'] },
render({ params }) {
return <article>Post: {params.slug}</article>;
},
});import { definePage } from '@openelement/app';
export default definePage({
route: { path: '/posts/[slug]', params: ['slug'] },
head: { title: 'Post' },
async load({ params }) {
return fetch(`https://api.example.com/posts/${params.slug}`)
.then((r) => r.json());
},
render({ data }) {
return <article>{data.title}</article>;
},
});export default definePage({
route: { path: '/field-notes' },
head: {
title: 'Field Notes',
description: 'Posts about Web Components',
meta: [{ property: 'og:type', content: 'article' }],
},
renderIntent: { mode: 'static', revalidate: 300 },
render() {
return <main>...</main>;
},
});