\u8fd9\u4ee3\u7801\u5199\u5f97\u8ddf\u7f51\u7ea2\u6ee4\u955c\u4f3c\u7684\u2014\u2014\u4ec5\u4f9b\u53c2\u8003\u3002<\/p>\n
\u5404\u4f4d\u524d\u7aef\u540c\u884c，\u54b1\u4eec\u4eca\u5929\u804a\u804a Remix\u3002\u522b\u544a\u8bc9\u6211\u4f60\u8fd8\u5728\u8ba9\u5ba2\u6237\u7aef\u505a\u6240\u6709\u4e8b\u60c5，\u90a3\u611f\u89c9\u5c31\u50cf\u8ba9\u8682\u8681\u642c\u5927\u8c61\u2014\u2014\u80fd\u642c，\u4f46\u7d2f\u6b7b\u4eba\u3002<\/p>\n
\u6700\u8fd1\u770b\u5230\u4e00\u4e2a Next.js \u9879\u76ee，\u9875\u9762\u52a0\u8f7d\u65f6\u5148\u663e\u793a loading，\u518d\u83b7\u53d6\u6570\u636e，\u518d\u663e\u793a\u5185\u5bb9\u3002\u6211\u5c31\u60f3\u95ee：\u4f60\u662f\u5728\u505a\u7f51\u7ad9\u8fd8\u662f\u5728\u505a\u52a0\u8f7d\u52a8\u753b\u5c55\u793a？<\/p>\n
\/\/ \u53cd\u9762\u6559\u6750：\u5ba2\u6237\u7aef\u6570\u636e\u83b7\u53d6
\n\/\/ pages\/blog\/[slug].jsx
\nimport { useState, useEffect } from 'react';<\/p>\n
export default function BlogPost() {
\n const [post, setPost] = useState(null);
\n const [loading, setLoading] = useState(true);
\n const [error, setError] = useState(null);<\/p>\n
useEffect(() => {
\n async function fetchPost() {
\n setLoading(true);
\n try {
\n const res = await fetch('\/api\/posts\/123');
\n const data = await res.json();
\n setPost(data);
\n } catch (err) {
\n setError(err.message);
\n } finally {
\n setLoading(false);
\n }
\n }<\/p>\n
fetchPost();
\n }, []);<\/p>\n
if (loading) return <div>\u52a0\u8f7d\u4e2d…<\/div>;
\n if (error) return <div>\u9519\u8bef: {error}<\/div>;
\n if (!post) return <div>\u6587\u7ae0\u4e0d\u5b58\u5728<\/div>;<\/p>\n
return (
\n <div>
\n <h1>{post.title}<\/h1>
\n <div dangerouslySetInnerHTML={{ __html: post.content }} \/>
\n <\/div>
\n );
\n}<\/p>\n
\u6bd2\u820c\u70b9\u8bc4：\u8fd9\u4ee3\u7801，\u5148\u663e\u793a\u52a0\u8f7d，\u518d\u83b7\u53d6\u6570\u636e，\u518d\u663e\u793a\u5185\u5bb9，\u4f60\u662f\u5728\u5199\u7f51\u7ad9\u8fd8\u662f\u5728\u62cd\u7535\u89c6\u5267？<\/p>\n
\/\/ \u6b63\u786e\u59ff\u52bf：\u670d\u52a1\u7aef\u6570\u636e\u83b7\u53d6
\n\/\/ app\/routes\/blog.$slug.jsx
\nimport { json } from '@remix-run\/node';<\/p>\n
export async function loader({ params }) {
\n const post = await fetchPost(params.slug);
\n if (!post) throw new Response('Not Found', { status: 404 });
\n return json({ post });
\n}<\/p>\n
export default function BlogPost() {
\n const { post } = useLoaderData();<\/p>\n
return (
\n <div>
\n <h1>{post.title}<\/h1>
\n <div dangerouslySetInnerHTML={{ __html: post.content }} \/>
\n <\/div>
\n );
\n}<\/p>\n
\/\/ \u6b63\u786e\u59ff\u52bf：\u670d\u52a1\u7aef\u8868\u5355\u5904\u7406
\n\/\/ app\/routes\/contacts.jsx
\nimport { json, redirect } from '@remix-run\/node';<\/p>\n
export async function action({ request }) {
\n const formData = await request.formData();
\n const name = formData.get('name');
\n const email = formData.get('email');
\n const message = formData.get('message');<\/p>\n
\/\/ \u670d\u52a1\u7aef\u9a8c\u8bc1
\n if (!name || !email || !message) {
\n return json({ error: '\u8bf7\u586b\u5199\u6240\u6709\u5b57\u6bb5' }, { status: 400 });
\n }<\/p>\n
\/\/ \u4fdd\u5b58\u5230\u6570\u636e\u5e93
\n await saveContact({ name, email, message });<\/p>\n
return redirect('\/thanks');
\n}<\/p>\n
export default function ContactPage() {
\n const actionData = useActionData();<\/p>\n
return (
\n <form method="post">
\n {actionData?.error && <div>{actionData.error}<\/div>}
\n <input name="name" placeholder="\u59d3\u540d" \/>
\n <input name="email" type="email" placeholder="\u90ae\u7bb1" \/>
\n <textarea name="message" placeholder="\u7559\u8a00" \/>
\n <button type="submit">\u63d0\u4ea4<\/button>
\n <\/form>
\n );
\n}<\/p>\n
\/\/ \u6b63\u786e\u59ff\u52bf：\u5d4c\u5957\u8def\u7531
\n\/\/ app\/routes\/admin.jsx
\nexport default function AdminLayout() {
\n return (
\n <div className="admin">
\n <nav>
\n <Link to="\/admin\/users">\u7528\u6237\u7ba1\u7406<\/Link>
\n <Link to="\/admin\/posts">\u6587\u7ae0\u7ba1\u7406<\/Link>
\n <\/nav>
\n <Outlet \/>
\n <\/div>
\n );
\n}<\/p>\n
\/\/ app\/routes\/admin.users.jsx
\nexport async function loader() {
\n const users = await getUsers();
\n return json({ users });
\n}<\/p>\n
export default function UsersPage() {
\n const { users } = useLoaderData();
\n return (
\n <div>
\n <h2>\u7528\u6237\u7ba1\u7406<\/h2>
\n <ul>
\n {users.map(user => (
\n <li key={user.id}>{user.name}<\/li>
\n ))}
\n <\/ul>
\n <\/div>
\n );
\n}<\/p>\n
\u6bd2\u820c\u70b9\u8bc4：\u8fd9\u624d\u53eb\u73b0\u4ee3\u6846\u67b6，\u670d\u52a1\u7aef\u5904\u7406\u6570\u636e，\u5ba2\u6237\u7aef\u53ea\u8d1f\u8d23\u6e32\u67d3\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Remix \u6846\u67b6：\u522b\u518d\u8ba9\u5ba2\u6237\u7aef\u505a\u670d\u52a1\u5668\u7684\u6d3b\u4e86
\n\u6bd2\u820c\u65f6\u523b\u8fd9\u4ee3\u7801\u5199\u5f97\u8ddf\u7f51\u7ea2\u6ee4\u955c\u4f3c\u7684\u2014\u2014\u4ec5\u4f9b\u53c2\u8003\u3002\u5404\u4f4d\u524d\u7aef\u540c\u884c，\u54b1\u4eec\u4eca\u5929\u804a\u804a Remix\u3002\u522b\u544a\u8bc9\u6211\u4f60\u8fd8\u5728\u8ba9\u5ba2\u6237\u7aef\u505a\u6240\u6709\u4e8b\u60c5，\u90a3\u611f\u89c9\u5c31\u50cf\u8ba9\u8682\u8681\u642c\u5927\u8c61\u2014\u2014\u80fd\u642c，\u4f46\u7d2f\u6b7b\u4eba\u3002
\n\u4e3a\u4ec0\u4e48\u4f60\u9700\u8981 Remix
\n\u6700\u8fd1\u770b\u5230\u4e00\u4e2a Next.js \u9879\u76ee，\u9875\u9762\u52a0\u8f7d\u65f6\u5148\u663e\u793a loading，\u518d\u83b7\u53d6\u6570\u636e，\u518d\u663e\u793a\u5185\u5bb9\u3002\u6211\u5c31\u60f3\u95ee：\u4f60\u662f\u5728\u505a\u7f51\u7ad9\u8fd8\u662f\u5728\u505a\u52a0\u8f7d\u52a8\u753b<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[723,458,594,87],"topic":[],"class_list":["post-95738","post","type-post","status-publish","format-standard","hentry","category-server","tag-react","tag-vue","tag-web","tag-87"],"yoast_head":"\n