Routing

MiniWork uses file-based routing where your file structure defines your URL structure.

Basic Routes

        export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our website.</p>
    </div>
  );
}
      

Dynamic Routes

        export async function loader({ params, db }) {
  const post = db.query('SELECT * FROM posts WHERE id = ?', [params.id]);
  return { post };
}

export default function PostPage({ data }) {
  return (
    <article>
      <h1>{data.post.title}</h1>
      <p>{data.post.content}</p>
    </article>
  );
}
      

Loaders

Loaders fetch data before rendering. They run on the server:

export async function loader(ctx) {
  const users = ctx.db.query('SELECT * FROM users');
  const page = ctx.url.searchParams.get('page') || '1';
  return { users, page: parseInt(page) };
}

Actions

Actions handle form submissions and mutations:

export async function action(ctx) {
  const formData = await ctx.formData();
  const name = formData.get('name');
  
  ctx.db.run('INSERT INTO users (name) VALUES (?)', [name]);
  return ctx.redirect('/users');
}