路由系统 #

文件路径                    → URL
src/routes/index.tsx        → /
src/routes/about.tsx        → /about
src/routes/blog/index.tsx   → /blog
src/routes/blog/[slug].tsx  → /blog/:slug
src/routes/user/[id].tsx    → /user/:id

// src/routes/index.tsx
export default function Home() {
  return <h1>Home Page</h1>;
}

// src/routes/about.tsx
export default function About() {
  return <h1>About Page</h1>;
}

// src/routes/user/[id].tsx
import { useParams } from 'solid-start';

export default function UserProfile() {
  const params = useParams();

  return <h1>User ID: {params.id}</h1>;
}

import { createRouteData, useRouteData } from 'solid-start';

export function routeData({ params }) {
  return createRouteData(async () => {
    const user = await fetchUser(params.id);
    return user;
  });
}

export default function UserProfile() {
  const user = useRouteData();

  return (
    <div>
      <h1>{user().name}</h1>
      <p>{user().email}</p>
    </div>
  );
}

// src/routes/blog.tsx (布局)
import { Outlet } from 'solid-start';

export default function BlogLayout() {
  return (
    <div>
      <nav>Blog Navigation</nav>
      <Outlet />
    </div>
  );
}

// src/routes/blog/index.tsx
export default function BlogList() {
  return <h1>Blog List</h1>;
}

// src/routes/blog/[slug].tsx
export default function BlogPost() {
  return <h1>Blog Post</h1>;
}

import { A } from 'solid-start/router';

export default function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
      <A href="/blog">Blog</A>
    </nav>
  );
}

import { useNavigate } from 'solid-start/router';

export default function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    await login();
    navigate('/dashboard');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}