{"id":718,"date":"2026-02-08T00:41:14","date_gmt":"2026-02-07T16:41:14","guid":{"rendered":"https:\/\/blog.itsmygo.uk\/2026\/02\/08\/%e3%80%90react-%e7%b4%94%e5%89%8d%e7%ab%af%e5%af%a6%e6%88%b0%e3%80%9104-router-query-%e6%95%b4%e5%90%88%ef%bc%9aloader-%e6%a8%a1%e5%bc%8f%e8%88%87%e9%a0%90%e5%8f%96%e7%ad%96%e7%95%a5\/"},"modified":"2026-02-08T00:41:14","modified_gmt":"2026-02-07T16:41:14","slug":"%e3%80%90react-%e7%b4%94%e5%89%8d%e7%ab%af%e5%af%a6%e6%88%b0%e3%80%9104-router-query-%e6%95%b4%e5%90%88%ef%bc%9aloader-%e6%a8%a1%e5%bc%8f%e8%88%87%e9%a0%90%e5%8f%96%e7%ad%96%e7%95%a5","status":"publish","type":"post","link":"https:\/\/blog.itsmygo.uk\/wordpress\/2026\/02\/08\/%e3%80%90react-%e7%b4%94%e5%89%8d%e7%ab%af%e5%af%a6%e6%88%b0%e3%80%9104-router-query-%e6%95%b4%e5%90%88%ef%bc%9aloader-%e6%a8%a1%e5%bc%8f%e8%88%87%e9%a0%90%e5%8f%96%e7%ad%96%e7%95%a5\/","title":{"rendered":"\u3010React \u7d14\u524d\u7aef\u5be6\u6230\u3011#04 Router + Query \u6574\u5408\uff1aloader \u6a21\u5f0f\u8207\u9810\u53d6\u7b56\u7565"},"content":{"rendered":"\n<div id=\"quiz-2076f16c\">\n<style>\n#quiz-2076f16c .question {\n        background: white;\n        border-radius: 8px;\n        padding: 20px;\n        margin: 20px 0;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      }#quiz-2076f16c .question h3 {\n        margin-top: 0;\n        color: #333;\n      }#quiz-2076f16c .options {\n        list-style: none;\n        padding: 0;\n      }#quiz-2076f16c .options li {\n        padding: 12px 15px;\n        margin: 8px 0;\n        border: 2px solid #ddd;\n        border-radius: 6px;\n        cursor: pointer;\n        transition: all 0.2s;\n      }#quiz-2076f16c .options li:hover:not(.disabled) {\n        border-color: #4caf50;\n        background: #f0fff0;\n      }#quiz-2076f16c .options li.correct {\n        border-color: #4caf50;\n        background: #e8f5e9;\n      }#quiz-2076f16c .options li.wrong {\n        border-color: #f44336;\n        background: #ffebee;\n      }#quiz-2076f16c .options li.disabled {\n        cursor: default;\n        opacity: 0.7;\n      }#quiz-2076f16c .options li.show-answer {\n        border-color: #4caf50;\n        background: #e8f5e9;\n      }#quiz-2076f16c .feedback {\n        margin-top: 15px;\n        padding: 12px;\n        border-radius: 6px;\n        display: none;\n      }#quiz-2076f16c .feedback.correct {\n        background: #e8f5e9;\n        color: #2e7d32;\n        display: block;\n      }#quiz-2076f16c .feedback.wrong {\n        background: #ffebee;\n        color: #c62828;\n        display: block;\n      }#quiz-2076f16c .score {\n        text-align: center;\n        font-size: 1.5em;\n        padding: 20px;\n        background: white;\n        border-radius: 8px;\n        margin-top: 20px;\n      }#quiz-2076f16c .code-block {\n        background: #1e1e1e;\n        color: #d4d4d4;\n        padding: 14px;\n        border-radius: 6px;\n        font-family: \"Monaco\", \"Consolas\", \"Courier New\", monospace;\n        font-size: 0.9em;\n        overflow-x: auto;\n        margin: 12px 0;\n        white-space: pre-wrap;\n      }\n<\/style>\n<h1>\u6e2c\u9a57\uff1aRouter + Query \u6574\u5408\uff1aloader \u6a21\u5f0f\u8207\u9810\u53d6\u7b56\u7565<\/h1>\n    <p>\u5171 5 \u984c\uff0c\u9ede\u9078\u7b54\u6848\u5f8c\u6703\u7acb\u5373\u986f\u793a\u7d50\u679c<\/p>\n\n    <div class=\"question\" id=\"q1\">\n      <h3>1. \u5728\u5143\u4ef6\u5167\u6293\u8cc7\u6599\u6642\uff0c\u5de2\u72c0\u5143\u4ef6\u6703\u5c0e\u81f4\u300cLoading \u7011\u5e03\u6d41\u300d\u554f\u984c\u3002\u9019\u500b\u554f\u984c\u7684\u6838\u5fc3\u539f\u56e0\u662f\u4ec0\u9ebc\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(1, 'A', 'B')\">A. \u6bcf\u500b\u5143\u4ef6\u90fd\u4f7f\u7528\u4e0d\u540c\u7684 queryKey\uff0c\u5c0e\u81f4\u5feb\u53d6\u7121\u6cd5\u5171\u7528<\/li>\n        <li onclick=\"checkAnswer(1, 'B', 'B')\">B. \u5b50\u5143\u4ef6\u8981\u7b49\u7236\u5143\u4ef6\u6e32\u67d3\u5b8c\u624d\u958b\u59cb\u6293\u8cc7\u6599\uff0c\u5f62\u6210\u4e32\u806f\u7b49\u5f85<\/li>\n        <li onclick=\"checkAnswer(1, 'C', 'B')\">C. TanStack Query \u9810\u8a2d\u4e0d\u5141\u8a31\u4e26\u884c\u8acb\u6c42<\/li>\n        <li onclick=\"checkAnswer(1, 'D', 'B')\">D. \u700f\u89bd\u5668\u9650\u5236\u540c\u6642\u53ea\u80fd\u767c\u9001\u4e00\u500b HTTP \u8acb\u6c42<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb1\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q2\">\n      <h3>2. \u8981\u8b93 TanStack Router \u7684 loader \u80fd\u4f7f\u7528 <code>queryClient<\/code>\uff0c\u9700\u8981\u900f\u904e\u4ec0\u9ebc\u6a5f\u5236\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(2, 'A', 'C')\">A. \u5728\u6bcf\u500b\u8def\u7531\u6a94\u6848\u4e2d\u55ae\u7368 import queryClient<\/li>\n        <li onclick=\"checkAnswer(2, 'B', 'C')\">B. \u628a queryClient \u5b58\u5728\u5168\u57df\u8b8a\u6578 window \u4e0a<\/li>\n        <li onclick=\"checkAnswer(2, 'C', 'C')\">C. \u7528 <code>createRootRouteWithContext<\/code> \u5b9a\u7fa9 context\uff0c\u4e26\u5728 <code>createRouter<\/code> \u6642\u50b3\u5165 queryClient<\/li>\n        <li onclick=\"checkAnswer(2, 'D', 'C')\">D. \u5728 <code>QueryClientProvider<\/code> \u7684 props \u4e2d\u8a2d\u5b9a <code>routerEnabled<\/code><\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb2\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q3\">\n      <h3>3. \u4ee5\u4e0b\u5169\u6bb5 loader \u7a0b\u5f0f\u78bc\u7684\u5dee\u7570\u662f\u4ec0\u9ebc\uff1f<\/h3>\n      <div class=\"code-block\">\/\/ \u5beb\u6cd5 A\nloader: async ({ params, context }) => {\n  await context.queryClient.ensureQueryData(options)\n}\n\n\/\/ \u5beb\u6cd5 B\nloader: ({ params, context }) => {\n  context.queryClient.prefetchQuery(options)\n}<\/div>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(3, 'A', 'B')\">A. \u5beb\u6cd5 A \u4e0d\u4f7f\u7528\u5feb\u53d6\uff0c\u5beb\u6cd5 B \u6703\u4f7f\u7528\u5feb\u53d6<\/li>\n        <li onclick=\"checkAnswer(3, 'B', 'B')\">B. \u5beb\u6cd5 A \u6703\u7b49\u8cc7\u6599\u6293\u5b8c\u624d\u9032\u5165\u9801\u9762\uff0c\u5beb\u6cd5 B \u89f8\u767c\u8acb\u6c42\u5f8c\u7acb\u523b\u9032\u5165\u9801\u9762<\/li>\n        <li onclick=\"checkAnswer(3, 'C', 'B')\">C. \u5beb\u6cd5 A \u7528\u65bc\u8b80\u53d6\u8cc7\u6599\uff0c\u5beb\u6cd5 B \u7528\u65bc\u5beb\u5165\u8cc7\u6599<\/li>\n        <li onclick=\"checkAnswer(3, 'D', 'B')\">D. \u5169\u8005\u884c\u70ba\u5b8c\u5168\u76f8\u540c\uff0c\u53ea\u662f\u8a9e\u6cd5\u4e0d\u540c<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb3\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q4\">\n      <h3>4. \u70ba\u4ec0\u9ebc\u6587\u7ae0\u5efa\u8b70\u628a query options \u62bd\u6210\u5171\u7528\u51fd\u5f0f\uff0c\u8b93 loader \u548c\u5143\u4ef6\u90fd\u4f7f\u7528\u540c\u4e00\u500b\u51fd\u5f0f\uff1f<\/h3>\n      <div class=\"code-block\">const postQueryOptions = (postId: string) => ({\n  queryKey: [&#8216;posts&#8217;, postId],\n  queryFn: () => fetch(`\/api\/posts\/${postId}`).then(r => r.json()),\n})<\/div>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(4, 'A', 'D')\">A. \u70ba\u4e86\u6e1b\u5c11\u7a0b\u5f0f\u78bc\u884c\u6578\uff0c\u8b93\u6a94\u6848\u66f4\u77ed<\/li>\n        <li onclick=\"checkAnswer(4, 'B', 'D')\">B. TanStack Query \u5f37\u5236\u8981\u6c42 queryOptions \u5fc5\u9808\u7528\u51fd\u5f0f\u5b9a\u7fa9<\/li>\n        <li onclick=\"checkAnswer(4, 'C', 'D')\">C. \u70ba\u4e86\u8b93 TypeScript \u80fd\u81ea\u52d5\u63a8\u5c0e loader \u7684\u56de\u50b3\u578b\u5225<\/li>\n        <li onclick=\"checkAnswer(4, 'D', 'D')\">D. \u78ba\u4fdd loader \u5b58\u9032\u5feb\u53d6\u7684 queryKey \u548c\u5143\u4ef6\u53d6\u51fa\u6642\u7684 queryKey \u5b8c\u5168\u4e00\u81f4\uff0c\u907f\u514d\u5feb\u53d6\u5931\u6548<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb4\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q5\">\n      <h3>5. \u4e00\u500b\u5217\u8868\u9801\u4f7f\u7528 search params \u9a45\u52d5\u67e5\u8a62\uff08\u5206\u9801\u3001\u6392\u5e8f\uff09\uff0c\u4ee5\u4e0b\u54ea\u500b\u505a\u6cd5\u662f\u6b63\u78ba\u7684\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(5, 'A', 'C')\">A. \u7528 <code>useState<\/code> \u5132\u5b58\u5206\u9801\u72c0\u614b\uff0c\u5728 <code>useEffect<\/code> \u88e1\u540c\u6b65\u5230 URL<\/li>\n        <li onclick=\"checkAnswer(5, 'B', 'C')\">B. \u5728 loader \u4e2d\u7528 <code>window.location.search<\/code> \u624b\u52d5\u89e3\u6790 search params<\/li>\n        <li onclick=\"checkAnswer(5, 'C', 'C')\">C. \u7528 <code>validateSearch<\/code> \u9a57\u8b49 search params\uff0c\u5728 loader \u4e2d\u900f\u904e <code>search<\/code> \u53c3\u6578\u5b58\u53d6\uff0c\u4e26\u5c07 search \u653e\u9032 queryKey<\/li>\n        <li onclick=\"checkAnswer(5, 'D', 'C')\">D. \u628a\u5206\u9801\u548c\u6392\u5e8f\u8cc7\u8a0a\u5b58\u5728 <code>localStorage<\/code>\uff0c\u6bcf\u6b21\u9032\u5165\u9801\u9762\u6642\u8b80\u53d6<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb5\"><\/div>\n    <\/div>\n\n    <div class=\"score\" id=\"score\" style=\"display:none;\"><\/div>\n<script>\n\n      let answered = 0;\n      let correct = 0;\n      const total = 5;\n      const explanations = {\n        1: \"\u5143\u4ef6\u5167\u6293\u8cc7\u6599\u7684\u7011\u5e03\u6d41\u554f\u984c\u662f\u56e0\u70ba\u5de2\u72c0\u5143\u4ef6\u7684\u6e32\u67d3\u662f\u6709\u9806\u5e8f\u7684\u2014\u2014\u7236\u5143\u4ef6\u6e32\u67d3\u5b8c\u4e26\u62ff\u5230\u8cc7\u6599\u5f8c\uff0c\u5b50\u5143\u4ef6\u624d\u958b\u59cb\u6e32\u67d3\u548c\u6293\u8cc7\u6599\u3002\u9019\u4e9b\u8cc7\u6599\u4e4b\u9593\u53ef\u80fd\u6c92\u6709\u4f9d\u8cf4\u95dc\u4fc2\uff0c\u672c\u53ef\u4ee5\u4e26\u884c\u6293\u53d6\uff0c\u537b\u88ab\u8feb\u8b8a\u6210\u4e32\u806f\u7b49\u5f85\u3002loader \u5c31\u662f\u70ba\u4e86\u5728\u8def\u7531\u5c64\u540c\u6642\u89f8\u767c\u6240\u6709\u8acb\u6c42\u4f86\u89e3\u6c7a\u9019\u500b\u554f\u984c\u3002\",\n        2: \"\u8981\u8b93 loader \u5b58\u53d6 queryClient\uff0c\u9700\u8981\u5728\u6839\u8def\u7531\u7528 <code>createRootRouteWithContext<\/code> \u5b9a\u7fa9 context \u578b\u5225\uff0c\u7136\u5f8c\u5728 <code>createRouter<\/code> \u6642\u900f\u904e <code>context: { queryClient }<\/code> \u50b3\u5165\u3002\u9019\u6a23\u6240\u6709\u5b50\u8def\u7531\u7684 loader \u5c31\u80fd\u900f\u904e <code>context.queryClient<\/code> \u5b58\u53d6\u5230\u5feb\u53d6\u7ba1\u7406\u5668\u3002\",\n        3: \"<code>ensureQueryData<\/code> \u642d\u914d <code>await<\/code> \u6703\u7b49\u5230\u5feb\u53d6\u4e2d\u6709\u8cc7\u6599\u624d\u7e7c\u7e8c\uff08Ensure \u6a21\u5f0f\uff09\uff0c\u4f7f\u7528\u8005\u5728\u820a\u9801\u9762\u7b49\u5f85\u3002<code>prefetchQuery<\/code> \u4e0d\u642d\u914d <code>await<\/code> \u6703\u89f8\u767c\u8acb\u6c42\u4f46\u7acb\u523b\u7e7c\u7e8c\uff08Prefetch \u6a21\u5f0f\uff09\uff0c\u9801\u9762\u5148\u9032\u5165\uff0c\u5143\u4ef6\u4e2d\u7528 <code>useSuspenseQuery<\/code> \u63a5\u624b\u8655\u7406\u8cc7\u6599\u9084\u6c92\u56de\u4f86\u7684\u60c5\u6cc1\u3002\",\n        4: \"\u5982\u679c loader \u548c\u5143\u4ef6\u5404\u81ea\u5b9a\u7fa9 queryKey\uff0c\u5f88\u5bb9\u6613\u51fa\u73fe\u6253\u932f\u5b57\u7684\u60c5\u6cc1\uff08\u4f8b\u5982 <code>['posts', id]<\/code> vs <code>['post', id]<\/code>\uff09\u3002\u4e00\u65e6 key \u4e0d\u4e00\u81f4\uff0cloader \u6293\u56de\u4f86\u7684\u8cc7\u6599\u5b58\u5728\u4e00\u500b key \u4e0b\uff0c\u5143\u4ef6\u537b\u53bb\u53e6\u4e00\u500b key \u627e\uff0c\u7b49\u65bc loader \u767d\u505a\u4e86\u3002\u5171\u7528\u51fd\u5f0f\u78ba\u4fdd\u5169\u908a\u7528\u7684 key \u4e00\u5b9a\u76f8\u540c\u3002\",\n        5: \"\u6b63\u78ba\u505a\u6cd5\u662f\u7528 <code>validateSearch<\/code> \u5b9a\u7fa9\u548c\u9a57\u8b49 search params \u7684 schema\uff0cloader \u900f\u904e <code>search<\/code> \u53c3\u6578\u53d6\u5f97\u9a57\u8b49\u904e\u7684\u503c\uff0c\u4e26\u5c07\u5b83\u653e\u9032 queryKey\u3002\u9019\u6a23 URL \u5c31\u662f single source of truth\u2014\u2014\u5206\u4eab\u9023\u7d50\u5c31\u80fd\u9084\u539f\u756b\u9762\uff0c\u4e0d\u540c\u7684\u5206\u9801\/\u6392\u5e8f\u689d\u4ef6\u4e5f\u6703\u6709\u5404\u81ea\u7368\u7acb\u7684\u5feb\u53d6\u3002\"\n      };\n\n      function checkAnswer(qNum, selected, correctAns) {\n        const question = document.getElementById(\"q\" + qNum);\n        if (question.classList.contains(\"answered\")) return;\n\n        question.classList.add(\"answered\");\n        answered++;\n\n        const options = question.querySelectorAll(\".options li\");\n        options.forEach((opt) => {\n          opt.classList.add(\"disabled\");\n          if (opt.textContent.startsWith(correctAns + \".\")) {\n            opt.classList.add(\"show-answer\");\n          }\n        });\n\n        const feedback = document.getElementById(\"fb\" + qNum);\n        if (selected === correctAns) {\n          correct++;\n          feedback.className = \"feedback correct\";\n          feedback.innerHTML = \"&#10003; \u6b63\u78ba\uff01\" + explanations[qNum];\n        } else {\n          feedback.className = \"feedback wrong\";\n          feedback.innerHTML =\n            \"&#10007; \u932f\u8aa4\u3002\u6b63\u78ba\u7b54\u6848\u662f \" + correctAns + \"\u3002\" + explanations[qNum];\n          options.forEach((opt) => {\n            if (opt.textContent.startsWith(selected + \".\")) {\n              opt.classList.add(\"wrong\");\n            }\n          });\n        }\n\n        if (answered === total) {\n          const scoreDiv = document.getElementById(\"score\");\n          scoreDiv.style.display = \"block\";\n          scoreDiv.innerHTML =\n            \"\u6e2c\u9a57\u5b8c\u6210\uff01\u5f97\u5206\uff1a\" +\n            correct +\n            \" \/ \" +\n            total +\n            (correct === total\n              ? \" &#127881; \u5168\u5c0d\uff01\"\n              : correct >= Math.ceil(total * 0.6)\n                ? \" &#128077; \u4e0d\u932f\uff01\"\n                : \" &#128218; \u518d\u8907\u7fd2\u4e00\u4e0b\u5427\");\n        }\n      }\n    \n<\/script>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">**\u7cfb\u5217**\uff1aReact \u7d14\u524d\u7aef\u5be6\u6230\uff08\u7b2c 4 \u7bc7\uff0c\u5171 5 \u7bc7\uff09<br>**\u96e3\u5ea6**\uff1aL1-\u8d77\u6b65<br>**\u524d\u7f6e\u77e5\u8b58**\uff1a\u8b80\u5b8c\u672c\u7cfb\u5217\u7b2c 2 \u7bc7\uff08TanStack Router\uff09\u548c\u7b2c 3 \u7bc7\uff08TanStack Query\uff09<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u53e5\u8a71\u8aaa\u660e<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u8def\u7531\u5c64\u5c31\u958b\u59cb\u6293\u8cc7\u6599\uff0c\u8b93\u4f7f\u7528\u8005\u5207\u63db\u9801\u9762\u6642\u4e0d\u7528\u770b\u5230\u7a7a\u767d\u756b\u9762\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u70ba\u4ec0\u9ebc\u8981\u5728\u8def\u7531\u5c64\u6293\u8cc7\u6599\uff1f<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Loading \u7011\u5e03\u6d41\u554f\u984c<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u4e00\u7bc7\u6211\u5011\u5b78\u4e86 <code>useQuery<\/code>\u2014\u2014\u5728\u5143\u4ef6\u88e1\u9762\u6293\u8cc7\u6599\u3002\u4f46\u9019\u6709\u4e00\u500b\u554f\u984c\uff1a<strong>\u5143\u4ef6\u8981\u5148\u6e32\u67d3\uff0c\u624d\u6703\u958b\u59cb\u6293\u8cc7\u6599<\/strong>\u3002\u5982\u679c\u6709\u5de2\u72c0\u5143\u4ef6\uff0c\u5c31\u6703\u5f62\u6210\u300c\u7011\u5e03\u6d41\u300d\u3002<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u50b3\u7d71\u505a\u6cd5\uff08\u5143\u4ef6\u5167\u6293\u8cc7\u6599\uff09\uff1a\n\n  \u8def\u7531\u5339\u914d \/posts\/5\n    \u2193\n  PostLayout \u5143\u4ef6\u6e32\u67d3\n    \u2193 \u958b\u59cb\u6293\u4f5c\u8005\u8cc7\u6599...\n    \u2193 \u7b49\u5f85\u4e2d...\n    \u2193 \u62ff\u5230\u4f5c\u8005\u8cc7\u6599\u4e86\uff01\n    \u2193\n  PostDetail \u5143\u4ef6\u6e32\u67d3\uff08\u5b50\u5143\u4ef6\uff09\n    \u2193 \u958b\u59cb\u6293\u6587\u7ae0\u8cc7\u6599...\n    \u2193 \u7b49\u5f85\u4e2d...\n    \u2193 \u62ff\u5230\u6587\u7ae0\u8cc7\u6599\u4e86\uff01\n    \u2193\n  Comments \u5143\u4ef6\u6e32\u67d3\uff08\u66f4\u6df1\u7684\u5b50\u5143\u4ef6\uff09\n    \u2193 \u958b\u59cb\u6293\u7559\u8a00\u8cc7\u6599...\n    \u2193 \u7b49\u5f85\u4e2d...\n    \u2193 \u62ff\u5230\u4e86\uff01\u7d42\u65bc\u5168\u90e8\u986f\u793a\uff01\n\n\u7e3d\u7b49\u5f85\u6642\u9593 = \u4f5c\u8005 + \u6587\u7ae0 + \u7559\u8a00\uff08\u4e32\u806f\u7b49\u5f85\uff09\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u554f\u984c\u5728\u54ea\uff1f<\/strong> \u9019\u4e09\u7b46\u8cc7\u6599\u4e4b\u9593\u6c92\u6709\u4f9d\u8cf4\u95dc\u4fc2\uff0c\u5b83\u5011\u53ef\u4ee5\u540c\u6642\u6293\u3002\u4f46\u56e0\u70ba\u5143\u4ef6\u662f\u4e00\u5c64\u4e00\u5c64\u6e32\u67d3\u7684\uff0c\u8b8a\u6210\u4e86\u6392\u968a\u4e32\u806f\u7b49\u5f85\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">loader \u7684\u89e3\u6cd5<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">loader \u505a\u6cd5\uff08\u8def\u7531\u5c64\u6293\u8cc7\u6599\uff09\uff1a\n\n  \u8def\u7531\u5339\u914d \/posts\/5\n    \u2193\n  loader \u57f7\u884c\uff08\u5143\u4ef6\u9084\u6c92\u6e32\u67d3\uff01\uff09\n    \u2192 \u540c\u6642\u958b\u59cb\u6293\u4f5c\u8005\u8cc7\u6599\n    \u2192 \u540c\u6642\u958b\u59cb\u6293\u6587\u7ae0\u8cc7\u6599\n    \u2192 \u540c\u6642\u958b\u59cb\u6293\u7559\u8a00\u8cc7\u6599\n    \u2193 \u5168\u90e8\u6293\u5b8c\uff08\u6216\u81f3\u5c11\u958b\u59cb\u6293\u4e86\uff09\n    \u2193\n  \u5143\u4ef6\u6e32\u67d3 \u2192 \u8cc7\u6599\u5df2\u7d93\u6e96\u5099\u597d\uff01\n\n\u7e3d\u7b49\u5f85\u6642\u9593 = max(\u4f5c\u8005, \u6587\u7ae0, \u7559\u8a00)\uff08\u4e26\u884c\u7b49\u5f85\uff09\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1aloader \u8b93\u4f60\u5728\u300c\u9032\u5165\u9801\u9762\u4e4b\u524d\u300d\u5c31\u958b\u59cb\u6293\u8cc7\u6599\uff0c\u800c\u4e0d\u662f\u7b49\u5143\u4ef6\u4e00\u5c64\u4e00\u5c64\u6e32\u67d3\u5f8c\u624d\u958b\u59cb\u3002\u9019\u5c31\u662f TanStack Router \u548c TanStack Query \u6574\u5408\u7684\u6838\u5fc3\u50f9\u503c\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u628a QueryClient \u50b3\u9032 Router\uff08routerContext\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8981\u5728 loader \u88e1\u9762\u7528 TanStack Query\uff0c\u9996\u5148\u8981\u8b93 Router \u80fd\u5b58\u53d6\u5230 <code>queryClient<\/code>\u3002\u9019\u662f\u900f\u904e <strong>routerContext<\/strong> \u5be6\u73fe\u7684\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e00\u6b65\uff1a\u5b9a\u7fa9 Router Context \u578b\u5225<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/__root.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createRootRouteWithContext, Outlet } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> type { QueryClient } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-query'<\/span>\n\n<span class=\"hljs-comment\">\/\/ \u5b9a\u7fa9 Router \u7684 context \u578b\u5225<\/span>\ninterface RouterContext {\n  <span class=\"hljs-attr\">queryClient<\/span>: QueryClient        <span class=\"hljs-comment\">\/\/ \u6240\u6709\u8def\u7531\u90fd\u80fd\u5b58\u53d6\u5230 queryClient<\/span>\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createRootRouteWithContext&lt;RouterContext&gt;()({\n  <span class=\"hljs-attr\">component<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Outlet<\/span> \/&gt;<\/span><\/span>,\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9010\u884c\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u7a0b\u5f0f\u78bc<\/th>\n<th>\u7ffb\u8b6f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>interface RouterContext<\/code><\/td>\n<td>\u5b9a\u7fa9\u300c\u8def\u7531\u7684\u5171\u4eab\u80cc\u5305\u300d\u88e1\u9762\u6709\u4ec0\u9ebc\u6771\u897f<\/td>\n<\/tr>\n<tr>\n<td><code>queryClient: QueryClient<\/code><\/td>\n<td>\u80cc\u5305\u88e1\u653e\u4e86\u5feb\u53d6\u7ba1\u7406\u5668<\/td>\n<\/tr>\n<tr>\n<td><code>createRootRouteWithContext&lt;RouterContext&gt;()<\/code><\/td>\n<td>\u5efa\u7acb\u6839\u8def\u7531\uff0c\u4e26\u544a\u8a34\u5b83\u300c\u80cc\u5305\u7684\u578b\u5225\u9577\u9019\u6a23\u300d<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e8c\u6b65\uff1a\u5efa\u7acb Router \u6642\u50b3\u5165 context<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/main.tsx\uff08\u6216 src\/app.tsx\uff09<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createRouter, RouterProvider } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { QueryClient, QueryClientProvider } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-query'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { routeTree } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/routeTree.gen'<\/span>\n\n<span class=\"hljs-comment\">\/\/ \u5efa\u7acb\u5feb\u53d6\u7ba1\u7406\u5668<\/span>\n<span class=\"hljs-keyword\">const<\/span> queryClient = <span class=\"hljs-keyword\">new<\/span> QueryClient({\n  <span class=\"hljs-attr\">defaultOptions<\/span>: {\n    <span class=\"hljs-attr\">queries<\/span>: {\n      <span class=\"hljs-attr\">staleTime<\/span>: <span class=\"hljs-number\">1000<\/span> * <span class=\"hljs-number\">60<\/span> * <span class=\"hljs-number\">5<\/span>,    <span class=\"hljs-comment\">\/\/ 5 \u5206\u9418\u5167\u7b97\u65b0\u9bae<\/span>\n    },\n  },\n})\n\n<span class=\"hljs-comment\">\/\/ \u5efa\u7acb Router\uff0c\u628a queryClient \u653e\u9032 context<\/span>\n<span class=\"hljs-keyword\">const<\/span> router = createRouter({\n  routeTree,\n  <span class=\"hljs-attr\">context<\/span>: { queryClient },         <span class=\"hljs-comment\">\/\/ \u9019\u88e1\uff01\u628a queryClient \u50b3\u9032\u53bb<\/span>\n})\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">QueryClientProvider<\/span> <span class=\"hljs-attr\">client<\/span>=<span class=\"hljs-string\">{queryClient}<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">RouterProvider<\/span> <span class=\"hljs-attr\">router<\/span>=<span class=\"hljs-string\">{router}<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">QueryClientProvider<\/span>&gt;<\/span><\/span>\n  )\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9010\u884c\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u7a0b\u5f0f\u78bc<\/th>\n<th>\u7ffb\u8b6f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>context: { queryClient }<\/code><\/td>\n<td>\u628a queryClient \u653e\u9032\u8def\u7531\u7684\u300c\u5171\u4eab\u80cc\u5305\u300d<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;QueryClientProvider&gt;<\/code> \u5305 <code>&lt;RouterProvider&gt;<\/code><\/td>\n<td>Query \u7684 Provider \u8981\u5728\u6700\u5916\u5c64<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u5b8c\u6210\u5f8c\uff0c**\u6240\u6709\u8def\u7531\u7684 loader \u90fd\u80fd\u900f\u904e <code>context.queryClient<\/code> \u5b58\u53d6\u5230\u5feb\u53d6\u7ba1\u7406\u5668**\u3002\u9019\u662f\u4e00\u6b21\u6027\u7684\u8a2d\u5b9a\uff0c\u505a\u5b8c\u5c31\u4e0d\u7528\u518d\u7ba1\u4e86\u3002<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Loader \u57fa\u790e\uff1a\u5728\u8def\u7531\u5c64\u6293\u8cc7\u6599<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">loader \u51fd\u5f0f\u7684\u57fa\u672c\u7d50\u69cb<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/posts\/$postId.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createFileRoute } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/$postId'<\/span>)({\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ params, context }<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-comment\">\/\/ \u5728\u9019\u88e1\u6293\u8cc7\u6599\uff0c\u5143\u4ef6\u6e32\u67d3\u4e4b\u524d\u57f7\u884c<\/span>\n    <span class=\"hljs-built_in\">console<\/span>.log(params.postId)           <span class=\"hljs-comment\">\/\/ \u7db2\u5740\u53c3\u6578<\/span>\n    <span class=\"hljs-built_in\">console<\/span>.log(context.queryClient)     <span class=\"hljs-comment\">\/\/ \u5feb\u53d6\u7ba1\u7406\u5668<\/span>\n  },\n  <span class=\"hljs-attr\">component<\/span>: PostDetail,\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">loader \u80fd\u5b58\u53d6\u4ec0\u9ebc\uff1f<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u53c3\u6578<\/th>\n<th>\u610f\u601d<\/th>\n<th>\u7bc4\u4f8b<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>params<\/code><\/td>\n<td>\u7db2\u5740\u4e2d\u7684\u52d5\u614b\u53c3\u6578<\/td>\n<td><code>{ postId: '5' }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>context<\/code><\/td>\n<td>\u8def\u7531\u7684\u5171\u4eab\u80cc\u5305<\/td>\n<td><code>{ queryClient }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>search<\/code><\/td>\n<td>\u9a57\u8b49\u904e\u7684 search params<\/td>\n<td><code>{ page: 1, sort: 'date' }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>abortController<\/code><\/td>\n<td>\u53d6\u6d88\u4fe1\u865f\uff08\u8def\u7531\u96e2\u958b\u6642\u81ea\u52d5\u53d6\u6d88\uff09<\/td>\n<td>\u50b3\u7d66 fetch \u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">loader \u7684\u57f7\u884c\u6642\u6a5f<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">\u4f7f\u7528\u8005\u9ede\u4e86\u4e00\u500b\u9023\u7d50\uff08\/posts\/<span class=\"hljs-number\">5<\/span>\uff09\n  \u2193\nRouter \u5339\u914d\u5230 \/posts\/$postId \u8def\u7531\n  \u2193\n\u57f7\u884c beforeLoad\uff08\u5982\u679c\u6709\u7684\u8a71\uff0c\u4f8b\u5982\u8a8d\u8b49\u6aa2\u67e5\uff09\n  \u2193\n\u57f7\u884c loader \u2190 \u5728\u9019\u88e1\u6293\u8cc7\u6599\n  \u2193\nloader \u5b8c\u6210\uff08\u6216\u958b\u59cb\u6293\u4e86\uff09\n  \u2193\n\u6e32\u67d3 component\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u91cd\u9ede<\/strong>\uff1aloader \u5728 component \u6e32\u67d3<strong>\u4e4b\u524d<\/strong>\u57f7\u884c\u3002\u9019\u5c31\u662f\u70ba\u4ec0\u9ebc\u5b83\u80fd\u6d88\u9664 loading \u7011\u5e03\u6d41\u2014\u2014\u8cc7\u6599\u5728\u756b\u9762\u51fa\u73fe\u524d\u5c31\u6e96\u5099\u597d\u4e86\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5169\u7a2e\u6574\u5408\u6a21\u5f0f\uff1aEnsure vs Prefetch<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u662f\u672c\u7bc7\u6700\u6838\u5fc3\u7684\u6982\u5ff5\u3002TanStack Router \u7684 loader \u642d\u914d TanStack Query\uff0c\u6709\u5169\u7a2e\u4e3b\u8981\u6a21\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6a21\u5f0f\u4e00\uff1aEnsure \u6a21\u5f0f\uff08\u7b49\u5230\u6709\u8cc7\u6599\u624d\u9032\u9801\u9762\uff09<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/posts\/$postId.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createFileRoute } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n\n<span class=\"hljs-comment\">\/\/ \u5b9a\u7fa9 query \u9078\u9805\uff08\u53ef\u4ee5\u5728 loader \u548c\u5143\u4ef6\u4e4b\u9593\u5171\u7528\uff09<\/span>\n<span class=\"hljs-keyword\">const<\/span> postQueryOptions = <span class=\"hljs-function\">(<span class=\"hljs-params\">postId: string<\/span>) =&gt;<\/span> ({\n  <span class=\"hljs-attr\">queryKey<\/span>: &#91;<span class=\"hljs-string\">'posts'<\/span>, postId],\n  <span class=\"hljs-attr\">queryFn<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span>\n    fetch(<span class=\"hljs-string\">`\/api\/posts\/<span class=\"hljs-subst\">${postId}<\/span>`<\/span>).then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\n      <span class=\"hljs-keyword\">if<\/span> (!res.ok) <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">'Failed to fetch'<\/span>)\n      <span class=\"hljs-keyword\">return<\/span> res.json()\n    }),\n})\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/$postId'<\/span>)({\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-keyword\">async<\/span> ({ params, context }) =&gt; {\n    <span class=\"hljs-comment\">\/\/ ensureQueryData\uff1a\u5feb\u53d6\u6709\u5c31\u76f4\u63a5\u7528\uff0c\u6c92\u6709\u5c31\u7b49\u6293\u5b8c<\/span>\n    <span class=\"hljs-keyword\">await<\/span> context.queryClient.ensureQueryData(\n      postQueryOptions(params.postId)\n    )\n  },\n  <span class=\"hljs-attr\">component<\/span>: PostDetail,\n})\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">PostDetail<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> { postId } = Route.useParams()\n  <span class=\"hljs-comment\">\/\/ \u8cc7\u6599\u4e00\u5b9a\u5df2\u7d93\u5728\u5feb\u53d6\u88e1\u4e86\uff08loader \u4fdd\u8b49\u7684\uff09<\/span>\n  <span class=\"hljs-keyword\">const<\/span> { <span class=\"hljs-attr\">data<\/span>: post } = useQuery(postQueryOptions(postId))\n\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{post.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/span>    <span class=\"hljs-comment\">\/\/ \u4e0d\u9700\u8981\u8655\u7406 loading \u72c0\u614b\uff01<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9010\u884c\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u7a0b\u5f0f\u78bc<\/th>\n<th>\u7ffb\u8b6f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>postQueryOptions(postId)<\/code><\/td>\n<td>\u628a query \u7684\u8a2d\u5b9a\u62bd\u6210\u51fd\u5f0f\uff0cloader \u548c\u5143\u4ef6\u5171\u7528\u540c\u4e00\u4efd<\/td>\n<\/tr>\n<tr>\n<td><code>ensureQueryData(...)<\/code><\/td>\n<td>\u300c\u78ba\u4fdd\u5feb\u53d6\u88e1\u6709\u9019\u4efd\u8cc7\u6599\u300d\u2014\u2014\u6709\u5c31\u76f4\u63a5\u56de\u50b3\uff0c\u6c92\u6709\u5c31\u53bb\u6293\uff0c\u6293\u5b8c\u624d\u7e7c\u7e8c<\/td>\n<\/tr>\n<tr>\n<td><code>await<\/code><\/td>\n<td>\u7b49\u5230\u8cc7\u6599\u78ba\u5be6\u5728\u5feb\u53d6\u88e1\u4e86\uff0c\u624d\u8b93\u9801\u9762\u9032\u5165<\/td>\n<\/tr>\n<tr>\n<td>\u5143\u4ef6\u88e1\u7684 <code>useQuery<\/code><\/td>\n<td>\u56e0\u70ba loader \u5df2\u7d93\u78ba\u4fdd\u6709\u8cc7\u6599\u4e86\uff0cuseQuery \u6703\u76f4\u63a5\u5f9e\u5feb\u53d6\u62ff<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ensure \u6a21\u5f0f\u7684\u884c\u70ba<\/strong>\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u5feb\u53d6\u88e1\u6709\u8cc7\u6599\uff08\u4e14\u672a\u904e\u671f\uff09\uff1a\n  loader \u2192 \u76f4\u63a5\u56de\u50b3 \u2192 \u77ac\u9593\u9032\u5165\u9801\u9762\n\n\u5feb\u53d6\u88e1\u6c92\u8cc7\u6599\uff1a\n  loader \u2192 \u958b\u59cb\u6293 \u2192 \u7b49\u5f85\u4e2d... \u2192 \u6293\u5230\u4e86 \u2192 \u9032\u5165\u9801\u9762\n  \uff08\u4f7f\u7528\u8005\u5728\u820a\u9801\u9762\u7b49\u5f85\uff0c\u6216\u770b\u5230 pending UI\uff09\n<\/code><\/span><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u6a21\u5f0f\u4e8c\uff1aPrefetch \u6a21\u5f0f\uff08\u5148\u958b\u59cb\u6293\uff0c\u4e0d\u7b49\u7d50\u679c\uff09<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/posts\/$postId.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createFileRoute } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { useSuspenseQuery } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-query'<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> postQueryOptions = <span class=\"hljs-function\">(<span class=\"hljs-params\">postId: string<\/span>) =&gt;<\/span> ({\n  <span class=\"hljs-attr\">queryKey<\/span>: &#91;<span class=\"hljs-string\">'posts'<\/span>, postId],\n  <span class=\"hljs-attr\">queryFn<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span>\n    fetch(<span class=\"hljs-string\">`\/api\/posts\/<span class=\"hljs-subst\">${postId}<\/span>`<\/span>).then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\n      <span class=\"hljs-keyword\">if<\/span> (!res.ok) <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">'Failed to fetch'<\/span>)\n      <span class=\"hljs-keyword\">return<\/span> res.json()\n    }),\n})\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/$postId'<\/span>)({\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ params, context }<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-comment\">\/\/ prefetchQuery\uff1a\u958b\u59cb\u6293\uff0c\u4f46\u4e0d\u7b49\u7d50\u679c<\/span>\n    context.queryClient.prefetchQuery(\n      postQueryOptions(params.postId)\n    )\n    <span class=\"hljs-comment\">\/\/ \u6ce8\u610f\uff1a\u6c92\u6709 await\uff01<\/span>\n  },\n  <span class=\"hljs-attr\">component<\/span>: PostDetail,\n})\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">PostDetail<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> { postId } = Route.useParams()\n  <span class=\"hljs-comment\">\/\/ useSuspenseQuery \u63a5\u624b\uff1a\u5982\u679c\u8cc7\u6599\u9084\u6c92\u56de\u4f86\uff0c\u6703\u89f8\u767c Suspense<\/span>\n  <span class=\"hljs-keyword\">const<\/span> { <span class=\"hljs-attr\">data<\/span>: post } = useSuspenseQuery(postQueryOptions(postId))\n\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{post.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9010\u884c\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u7a0b\u5f0f\u78bc<\/th>\n<th>\u7ffb\u8b6f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>prefetchQuery(...)<\/code><\/td>\n<td>\u300c\u958b\u59cb\u6293\u8cc7\u6599\uff0c\u4f46\u6211\u4e0d\u7b49\u4f60\u300d\u2014\u2014\u89f8\u767c\u8acb\u6c42\u5c31\u99ac\u4e0a\u7e7c\u7e8c<\/td>\n<\/tr>\n<tr>\n<td>\u6c92\u6709 <code>await<\/code><\/td>\n<td>\u4e0d\u7b49\u7d50\u679c\uff0cloader \u7acb\u523b\u5b8c\u6210<\/td>\n<\/tr>\n<tr>\n<td><code>useSuspenseQuery(...)<\/code><\/td>\n<td>\u5728\u5143\u4ef6\u88e1\u63a5\u624b\u2014\u2014\u5982\u679c\u8cc7\u6599\u9084\u6c92\u56de\u4f86\uff0c\u300c\u66ab\u505c\u300d\u5143\u4ef6\u6e32\u67d3\uff0c\u986f\u793a Suspense fallback<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prefetch \u6a21\u5f0f\u7684\u884c\u70ba<\/strong>\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">loader \u2192 \u89f8\u767c\u8acb\u6c42\uff08\u4e0d\u7b49\u5f85\uff09\u2192 \u7acb\u523b\u9032\u5165\u9801\u9762\n  \u2193\n\u5143\u4ef6\u6e32\u67d3 \u2192 useSuspenseQuery \u767c\u73fe\u8cc7\u6599\u9084\u5728\u8def\u4e0a\n  \u2193\nSuspense fallback \u986f\u793a\uff08Loading...\uff09\n  \u2193\n\u8cc7\u6599\u56de\u4f86 \u2192 \u5143\u4ef6\u5b8c\u6210\u6e32\u67d3\n<\/code><\/span><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5169\u7a2e\u6a21\u5f0f\u600e\u9ebc\u9078\uff1f<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>Ensure \u6a21\u5f0f<\/th>\n<th>Prefetch \u6a21\u5f0f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>loader \u7684\u5beb\u6cd5<\/td>\n<td><code>await ensureQueryData()<\/code><\/td>\n<td><code>prefetchQuery()<\/code>\uff08\u4e0d await\uff09<\/td>\n<\/tr>\n<tr>\n<td>\u5143\u4ef6\u7528\u4ec0\u9ebc hook<\/td>\n<td><code>useQuery<\/code><\/td>\n<td><code>useSuspenseQuery<\/code><\/td>\n<\/tr>\n<tr>\n<td>\u9801\u9762\u5207\u63db\u884c\u70ba<\/td>\n<td>\u7b49\u8cc7\u6599\u6293\u5b8c\u624d\u9032\u65b0\u9801\u9762<\/td>\n<td>\u7acb\u523b\u9032\u65b0\u9801\u9762\uff0c\u5728\u65b0\u9801\u9762\u986f\u793a loading<\/td>\n<\/tr>\n<tr>\n<td>\u9069\u5408\u5834\u666f<\/td>\n<td>\u8cc7\u6599\u91cf\u5c0f\u3001\u5fc5\u9808\u6709\u8cc7\u6599\u624d\u6709\u610f\u7fa9\u7684\u9801\u9762<\/td>\n<td>\u9801\u9762\u6709\u591a\u5340\u584a\uff0c\u90e8\u5206\u5340\u584a\u53ef\u4ee5\u5148\u986f\u793a<\/td>\n<\/tr>\n<tr>\n<td>\u4f7f\u7528\u8005\u9ad4\u9a57<\/td>\n<td>\u505c\u5728\u820a\u9801\u9762\u7b49\u5f85\uff0c\u4f46\u9032\u5165\u65b0\u9801\u9762\u6642\u5b8c\u6574\u5448\u73fe<\/td>\n<td>\u7acb\u523b\u770b\u5230\u65b0\u9801\u9762\u7684\u6846\u67b6<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">**\u7d93\u9a57\u6cd5\u5247**\uff1a\u4e0d\u78ba\u5b9a\u7684\u8a71\u5148\u7528 **Ensure \u6a21\u5f0f**\uff0c\u56e0\u70ba\u5b83\u6bd4\u8f03\u7c21\u55ae\u2014\u2014\u4e0d\u7528\u8655\u7406 Suspense boundary\u3002\u7b49\u4f60\u767c\u73fe\u67d0\u500b\u9801\u9762\u7684\u7b49\u5f85\u6642\u9593\u592a\u9577\u518d\u8003\u616e Prefetch \u6a21\u5f0f\u3002<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5171\u7528 Query Options\uff1a\u907f\u514d loader \u548c\u5143\u4ef6\u7684 key \u4e0d\u4e00\u81f4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u9762\u5169\u500b\u7bc4\u4f8b\u90fd\u6709\u4e00\u500b\u95dc\u9375\u505a\u6cd5\uff1a<strong>\u628a query options \u62bd\u6210\u5171\u7528\u51fd\u5f0f<\/strong>\u3002<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ \u628a query options \u62bd\u51fa\u4f86<\/span>\n<span class=\"hljs-keyword\">const<\/span> postQueryOptions = <span class=\"hljs-function\">(<span class=\"hljs-params\">postId: string<\/span>) =&gt;<\/span> ({\n  <span class=\"hljs-attr\">queryKey<\/span>: &#91;<span class=\"hljs-string\">'posts'<\/span>, postId],\n  <span class=\"hljs-attr\">queryFn<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> fetch(<span class=\"hljs-string\">`\/api\/posts\/<span class=\"hljs-subst\">${postId}<\/span>`<\/span>).then(<span class=\"hljs-function\"><span class=\"hljs-params\">r<\/span> =&gt;<\/span> r.json()),\n})\n\n<span class=\"hljs-comment\">\/\/ loader \u7528\u5b83<\/span>\n<span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-keyword\">async<\/span> ({ params, context }) =&gt; {\n  <span class=\"hljs-keyword\">await<\/span> context.queryClient.ensureQueryData(postQueryOptions(params.postId))\n}\n\n<span class=\"hljs-comment\">\/\/ \u5143\u4ef6\u4e5f\u7528\u5b83<\/span>\n<span class=\"hljs-keyword\">const<\/span> { data } = useQuery(postQueryOptions(postId))\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u70ba\u4ec0\u9ebc\u9019\u5f88\u91cd\u8981\uff1f<\/strong> \u5982\u679c loader \u88e1\u9762\u7684 <code>queryKey<\/code> \u662f <code>['posts', postId]<\/code>\uff0c\u4f46\u5143\u4ef6\u88e1\u4e0d\u5c0f\u5fc3\u5beb\u6210 <code>['post', postId]<\/code>\uff08\u5c11\u4e86 s\uff09\uff0cloader \u6293\u597d\u7684\u8cc7\u6599\u5c31\u5b58\u5728\u932f\u7684 key \u5e95\u4e0b\uff0c\u5143\u4ef6\u627e\u4e0d\u5230\u5feb\u53d6\uff0c\u53c8\u6703\u91cd\u65b0\u6293\u4e00\u6b21\u2014\u2014loader \u7b49\u65bc\u767d\u505a\u4e86\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5171\u7528\u51fd\u5f0f\u78ba\u4fdd <strong>loader \u5b58\u9032\u53bb\u7684 key<\/strong> \u548c <strong>\u5143\u4ef6\u53d6\u51fa\u4f86\u7684 key<\/strong> \u4e00\u5b9a\u76f8\u540c\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Search Params \u9a45\u52d5\u67e5\u8a62<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7b2c 2 \u7bc7\u6211\u5011\u5b78\u4e86 <code>validateSearch<\/code> \u505a search params \u7684\u578b\u5225\u9a57\u8b49\u3002\u73fe\u5728\u628a\u5b83\u548c loader + Query \u6574\u5408\u8d77\u4f86\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b8c\u6574\u7bc4\u4f8b\uff1a\u5e36\u5206\u9801\u548c\u7be9\u9078\u7684\u5217\u8868\u9801<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/posts\/index.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createFileRoute } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { useQuery } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-query'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { z } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'zod'<\/span>\n\n<span class=\"hljs-comment\">\/\/ \u7b2c\u4e00\u6b65\uff1a\u5b9a\u7fa9 search params schema<\/span>\n<span class=\"hljs-keyword\">const<\/span> postsSearchSchema = z.object({\n  <span class=\"hljs-attr\">page<\/span>: z.number().default(<span class=\"hljs-number\">1<\/span>),                            <span class=\"hljs-comment\">\/\/ \u5206\u9801<\/span>\n  <span class=\"hljs-attr\">sort<\/span>: z.enum(&#91;<span class=\"hljs-string\">'date'<\/span>, <span class=\"hljs-string\">'title'<\/span>]).default(<span class=\"hljs-string\">'date'<\/span>),        <span class=\"hljs-comment\">\/\/ \u6392\u5e8f<\/span>\n  <span class=\"hljs-attr\">status<\/span>: z.enum(&#91;<span class=\"hljs-string\">'all'<\/span>, <span class=\"hljs-string\">'draft'<\/span>, <span class=\"hljs-string\">'published'<\/span>]).optional(), <span class=\"hljs-comment\">\/\/ \u7be9\u9078\uff08\u53ef\u9078\uff09<\/span>\n})\n\n<span class=\"hljs-comment\">\/\/ \u7b2c\u4e8c\u6b65\uff1a\u628a search params \u6574\u5408\u9032 query options<\/span>\n<span class=\"hljs-keyword\">const<\/span> postsQueryOptions = <span class=\"hljs-function\">(<span class=\"hljs-params\">search: z.infer&lt;<span class=\"hljs-keyword\">typeof<\/span> postsSearchSchema&gt;<\/span>) =&gt;<\/span> ({\n  <span class=\"hljs-attr\">queryKey<\/span>: &#91;<span class=\"hljs-string\">'posts'<\/span>, <span class=\"hljs-string\">'list'<\/span>, search],   <span class=\"hljs-comment\">\/\/ search params \u662f queryKey \u7684\u4e00\u90e8\u5206\uff01<\/span>\n  <span class=\"hljs-attr\">queryFn<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span>\n    fetch(<span class=\"hljs-string\">`\/api\/posts?page=<span class=\"hljs-subst\">${search.page}<\/span>&amp;sort=<span class=\"hljs-subst\">${search.sort}<\/span>`<\/span>)\n      .then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> res.json()),\n})\n\n<span class=\"hljs-comment\">\/\/ \u7b2c\u4e09\u6b65\uff1a\u8def\u7531\u5b9a\u7fa9<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/'<\/span>)({\n  <span class=\"hljs-attr\">validateSearch<\/span>: postsSearchSchema,        <span class=\"hljs-comment\">\/\/ \u9a57\u8b49 search params<\/span>\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-keyword\">async<\/span> ({ search, context }) =&gt; {\n    <span class=\"hljs-comment\">\/\/ search \u5df2\u7d93\u662f\u9a57\u8b49\u904e\u7684\u3001\u6709\u578b\u5225\u7684\u7269\u4ef6<\/span>\n    <span class=\"hljs-keyword\">await<\/span> context.queryClient.ensureQueryData(\n      postsQueryOptions(search)\n    )\n  },\n  <span class=\"hljs-attr\">component<\/span>: PostList,\n})\n\n<span class=\"hljs-comment\">\/\/ \u7b2c\u56db\u6b65\uff1a\u5143\u4ef6\u4f7f\u7528<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">PostList<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> search = Route.useSearch()          <span class=\"hljs-comment\">\/\/ \u53d6\u5f97\u9a57\u8b49\u904e\u7684 search params<\/span>\n  <span class=\"hljs-keyword\">const<\/span> { <span class=\"hljs-attr\">data<\/span>: posts } = useQuery(postsQueryOptions(search))\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\u6587\u7ae0\u5217\u8868\uff08\u7b2c {search.page} \u9801\uff09<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n        {posts.map(p =&gt; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{p.id}<\/span>&gt;<\/span>{p.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>)}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  )\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9010\u884c\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u7a0b\u5f0f\u78bc<\/th>\n<th>\u7ffb\u8b6f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>queryKey: ['posts', 'list', search]<\/code><\/td>\n<td>\u4e0d\u540c\u7684 search params \u6703\u7522\u751f\u4e0d\u540c\u7684\u5feb\u53d6<\/td>\n<\/tr>\n<tr>\n<td><code>loader: ({ search, context })<\/code><\/td>\n<td>loader \u80fd\u76f4\u63a5\u62ff\u5230\u9a57\u8b49\u904e\u7684 search params<\/td>\n<\/tr>\n<tr>\n<td><code>Route.useSearch()<\/code><\/td>\n<td>\u5143\u4ef6\u4e2d\u53d6\u5f97\u548c loader \u76f8\u540c\u7684 search params<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">URL \u5c31\u662f Single Source of Truth<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">\u4f7f\u7528\u8005\u5728\u7b2c <span class=\"hljs-number\">2<\/span> \u9801\uff0c\u6309\u65e5\u671f\u6392\u5e8f\uff1a\n  URL: \/posts?page=<span class=\"hljs-number\">2<\/span>&amp;sort=date\n\n\u4f7f\u7528\u8005\u628a\u9019\u500b URL \u5206\u4eab\u7d66\u540c\u4e8b\uff1a\n  \u540c\u4e8b\u6253\u958b \u2192 validateSearch \u89e3\u6790 \u2192 page=<span class=\"hljs-number\">2<\/span>, sort=<span class=\"hljs-string\">'date'<\/span>\n  \u2192 loader \u7528\u9019\u4e9b\u53c3\u6578\u6293\u8cc7\u6599 \u2192 \u770b\u5230\u4e00\u6a21\u4e00\u6a23\u7684\u756b\u9762\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u56e0\u70ba\u72c0\u614b\u90fd\u5728 URL \u88e1\uff0c\u6240\u4ee5\u5206\u4eab\u9023\u7d50\u5c31\u80fd\u9084\u539f\u756b\u9762\u3002\u4e0d\u7528\u984d\u5916\u5b58\u4ec0\u9ebc\u300c\u76ee\u524d\u662f\u7b2c\u5e7e\u9801\u300d\u7684\u72c0\u614b\u2014\u2014URL \u5c31\u662f\u7b54\u6848\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u66f4\u65b0 Search Params<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { useNavigate } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">PostListControls<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> navigate = useNavigate()\n  <span class=\"hljs-keyword\">const<\/span> { page, sort } = Route.useSearch()\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      {\/* \u65b9\u6cd5 1\uff1a\u7528 Link\uff08\u50cf\u63db\u9801\u6309\u9215\uff09 *\/}\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n        <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/posts\"<\/span>\n        <span class=\"hljs-attr\">search<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">page:<\/span> <span class=\"hljs-attr\">page<\/span> + <span class=\"hljs-attr\">1<\/span>, <span class=\"hljs-attr\">sort<\/span> }}     \/\/ \u4e0b\u4e00\u9801\n      &gt;<\/span>\n        \u4e0b\u4e00\u9801\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n      {\/* \u65b9\u6cd5 2\uff1a\u7528 navigate\uff08\u50cf\u4e0b\u62c9\u9078\u55ae\u6539\u6392\u5e8f\uff09 *\/}\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span>\n        <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{sort}<\/span>\n        <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span>\n          navigate({\n            to: '\/posts',\n            search: { page: 1, sort: e.target.value },  \/\/ \u6539\u6392\u5e8f\uff0c\u56de\u5230\u7b2c 1 \u9801\n          })\n        }\n      &gt;\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"date\"<\/span>&gt;<\/span>\u6309\u65e5\u671f<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>\u6309\u6a19\u984c<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  )\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u6539 search params \u5c31\u662f\u6539 URL\u3002URL \u4e00\u8b8a \u2192 <code>validateSearch<\/code> \u91cd\u65b0\u9a57\u8b49 \u2192 loader \u7528\u65b0\u53c3\u6578\u6293\u8cc7\u6599 \u2192 \u5143\u4ef6\u81ea\u52d5\u66f4\u65b0\u3002\u6574\u500b\u6d41\u7a0b\u81ea\u52d5\u4e32\u8d77\u4f86\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Pending UI\uff1a\u8def\u7531\u5207\u63db\u4e2d\u7684 Loading \u8655\u7406<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7528 Ensure \u6a21\u5f0f\u6642\uff0cloader \u6703\u7b49\u8cc7\u6599\u6293\u5b8c\u624d\u5207\u63db\u9801\u9762\u3002\u5982\u679c\u6293\u8cc7\u6599\u8981\u82b1\u5e7e\u79d2\u9418\uff0c\u4f7f\u7528\u8005\u4e0d\u6703\u770b\u5230\u4efb\u4f55\u53cd\u61c9\u2014\u2014\u9019\u9ad4\u9a57\u4e0d\u597d\u3002TanStack Router \u63d0\u4f9b\u4e86 <strong>Pending UI<\/strong> \u4f86\u89e3\u6c7a\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">pendingComponent\uff1a\u8def\u7531\u7d1a Loading<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/$postId'<\/span>)({\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-keyword\">async<\/span> ({ params, context }) =&gt; {\n    <span class=\"hljs-keyword\">await<\/span> context.queryClient.ensureQueryData(\n      postQueryOptions(params.postId)\n    )\n  },\n  <span class=\"hljs-attr\">pendingComponent<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\u6587\u7ae0\u8f09\u5165\u4e2d...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>,   <span class=\"hljs-comment\">\/\/ loader \u57f7\u884c\u4e2d\u6642\u986f\u793a<\/span>\n  <span class=\"hljs-attr\">pendingMinMs<\/span>: <span class=\"hljs-number\">200<\/span>,   <span class=\"hljs-comment\">\/\/ \u81f3\u5c11\u7b49 200ms \u624d\u986f\u793a pending\uff08\u907f\u514d\u9583\u720d\uff09<\/span>\n  <span class=\"hljs-attr\">pendingMs<\/span>: <span class=\"hljs-number\">1000<\/span>,     <span class=\"hljs-comment\">\/\/ loader \u8d85\u904e 1 \u79d2\u624d\u986f\u793a pending<\/span>\n  <span class=\"hljs-attr\">component<\/span>: PostDetail,\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9010\u884c\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u7a0b\u5f0f\u78bc<\/th>\n<th>\u7ffb\u8b6f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>pendingComponent<\/code><\/td>\n<td>loader \u5728\u7b49\u5f85\u6642\u8981\u986f\u793a\u4ec0\u9ebc\u756b\u9762<\/td>\n<\/tr>\n<tr>\n<td><code>pendingMs: 1000<\/code><\/td>\n<td>loader \u8dd1\u8d85\u904e 1 \u79d2\u624d\u6703\u51fa\u73fe pending \u756b\u9762\uff08\u907f\u514d\u592a\u5feb\u9583\u4e00\u4e0b\uff09<\/td>\n<\/tr>\n<tr>\n<td><code>pendingMinMs: 200<\/code><\/td>\n<td>pending \u756b\u9762\u81f3\u5c11\u986f\u793a 200ms\uff08\u907f\u514d\u624d\u51fa\u73fe\u5c31\u6d88\u5931\uff09<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pending \u7684\u6642\u9593\u7dda<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">loader<\/span> \u958b\u59cb\u57f7\u884c\n  \u2502\n  \u2502 0<span class=\"hljs-selector-tag\">ms<\/span> \u2500\u2500\u2500\u2500\u2500\u2500\u2500 500<span class=\"hljs-selector-tag\">ms<\/span> \u2500\u2500\u2500\u2500\u2500\u2500\u2500 1000<span class=\"hljs-selector-tag\">ms<\/span> \u2500\u2500\u2500\u2500\u2500\u2500\u2500 1200<span class=\"hljs-selector-tag\">ms<\/span> \u2500\u2500\u2500\u2500\u2500 1500<span class=\"hljs-selector-tag\">ms<\/span>\n  \u2502                              \u2502               \u2502            \u2502\n  \u2502                              \u2502  \u986f\u793a <span class=\"hljs-selector-tag\">pending<\/span>  \u2502            \u2502\n  \u2502                          <span class=\"hljs-selector-tag\">pendingMs<\/span>           <span class=\"hljs-selector-tag\">pendingMinMs<\/span>  \u2502\n  \u2502                         (\u8d85\u904e1\u79d2\u624d\u986f\u793a)    (\u81f3\u5c11\u986f\u793a200<span class=\"hljs-selector-tag\">ms<\/span>)   \u2502\n  \u2502                                                           \u2502\n  \u2502                                                    <span class=\"hljs-selector-tag\">loader<\/span> \u5b8c\u6210\n  \u2502                                                    \u986f\u793a\u9801\u9762\n\n  \u5982\u679c <span class=\"hljs-selector-tag\">loader<\/span> \u5728 500<span class=\"hljs-selector-tag\">ms<\/span> \u5167\u5b8c\u6210 \u2192 \u4e0d\u6703\u986f\u793a <span class=\"hljs-selector-tag\">pending<\/span>\uff08\u592a\u5feb\u4e86\u6c92\u5fc5\u8981\uff09\n  \u5982\u679c <span class=\"hljs-selector-tag\">loader<\/span> \u82b1\u4e86 1<span class=\"hljs-selector-class\">.1<\/span> \u79d2 \u2192 \u5728 1 \u79d2\u6642\u986f\u793a <span class=\"hljs-selector-tag\">pending<\/span>\uff0c\u81f3\u5c11\u986f\u793a\u5230 1<span class=\"hljs-selector-class\">.2<\/span> \u79d2\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5168\u57df Pending Indicator<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f60\u4e5f\u53ef\u4ee5\u5728\u6839\u8def\u7531\u8a2d\u5b9a\u5168\u57df\u7684 loading \u6307\u793a\u5668\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/__root.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createRootRouteWithContext, Outlet } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createRootRouteWithContext&lt;RouterContext&gt;()({\n  <span class=\"hljs-attr\">component<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\u5c0e\u89bd\u5217<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Outlet<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  ),\n  <span class=\"hljs-attr\">pendingComponent<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">textAlign:<\/span> '<span class=\"hljs-attr\">center<\/span>', <span class=\"hljs-attr\">padding:<\/span> '<span class=\"hljs-attr\">2rem<\/span>' }}&gt;<\/span>\n      \u9801\u9762\u5207\u63db\u4e2d...\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  ),\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u932f\u8aa4\u8655\u7406\uff1aerrorComponent<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7576 loader \u6293\u8cc7\u6599\u5931\u6557\u6642\uff0c\u4f60\u9700\u8981\u544a\u8a34\u4f7f\u7528\u8005\u767c\u751f\u4e86\u4ec0\u9ebc\u4e8b\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u57fa\u672c\u7528\u6cd5<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/$postId'<\/span>)({\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-keyword\">async<\/span> ({ params, context }) =&gt; {\n    <span class=\"hljs-keyword\">await<\/span> context.queryClient.ensureQueryData(\n      postQueryOptions(params.postId)\n    )\n  },\n  <span class=\"hljs-attr\">errorComponent<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ error }<\/span>) =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\u8f09\u5165\u5931\u6557<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{error.message}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> window.location.reload()}&gt;\u91cd\u8a66<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  ),\n  <span class=\"hljs-attr\">component<\/span>: PostDetail,\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u5982\u679c loader \u88e1\u9762\u7684 <code>ensureQueryData<\/code> \u6293\u8cc7\u6599\u5931\u6557\uff08\u7db2\u8def\u932f\u8aa4\u3001404 \u7b49\uff09\uff0cTanStack Router \u4e0d\u6703\u6e32\u67d3 <code>component<\/code>\uff0c\u800c\u662f\u6539\u6e32\u67d3 <code>errorComponent<\/code>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">loader \u62cb\u932f\u7684\u6d41\u7a0b<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">loader \u57f7\u884c\n  \u2193\nensureQueryData \u767c\u51fa\u8acb\u6c42\n  \u2193\nAPI \u56de\u50b3 <span class=\"hljs-number\">404<\/span>\n  \u2193\nqueryFn \u88e1\u9762\u7684 <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">'Failed to fetch'<\/span>) \u88ab\u89f8\u767c\n  \u2193\nensureQueryData \u5c07\u932f\u8aa4\u5411\u4e0a\u62cb\u51fa\n  \u2193\nTanStack Router \u63a5\u4f4f\u932f\u8aa4\n  \u2193\n\u6e32\u67d3 errorComponent\uff08\u800c\u4e0d\u662f component\uff09\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5168\u57df vs \u8def\u7531\u7d1a\u932f\u8aa4\u8655\u7406<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ \u5168\u57df\u932f\u8aa4\u8655\u7406\uff08\u6839\u8def\u7531\uff09<\/span>\n<span class=\"hljs-comment\">\/\/ src\/routes\/__root.tsx<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createRootRouteWithContext&lt;RouterContext&gt;()({\n  <span class=\"hljs-attr\">errorComponent<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ error }<\/span>) =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\u51fa\u4e86\u9ede\u554f\u984c\uff1a{error.message}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>    <span class=\"hljs-comment\">\/\/ \u6240\u6709\u5b50\u8def\u7531\u7684\u515c\u5e95<\/span>\n  ),\n  <span class=\"hljs-attr\">component<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Outlet<\/span> \/&gt;<\/span><\/span>,\n})\n\n<span class=\"hljs-comment\">\/\/ \u8def\u7531\u7d1a\u932f\u8aa4\u8655\u7406\uff08\u7279\u5b9a\u9801\u9762\uff09<\/span>\n<span class=\"hljs-comment\">\/\/ src\/routes\/posts\/$postId.tsx<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/$postId'<\/span>)({\n  <span class=\"hljs-attr\">errorComponent<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ error }<\/span>) =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\u627e\u4e0d\u5230\u9019\u7bc7\u6587\u7ae0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>                   <span class=\"hljs-comment\">\/\/ \u53ea\u6709\u9019\u500b\u8def\u7531\u7528<\/span>\n  ),\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u932f\u8aa4\u6703\u5148\u770b\u7576\u524d\u8def\u7531\u6709\u6c92\u6709 <code>errorComponent<\/code>\uff0c\u6709\u5c31\u7528\u3002\u6c92\u6709\u7684\u8a71\u5f80\u4e0a\u5c64\u8def\u7531\u627e\uff0c\u6700\u5f8c\u5230\u6839\u8def\u7531\u7684\u5168\u57df errorComponent\u3002\u5c31\u50cf try-catch \u7684\u5192\u6ce1\u6a5f\u5236\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b8c\u6574\u7bc4\u4f8b\uff1a\u628a\u6240\u6709\u6982\u5ff5\u4e32\u8d77\u4f86<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u662f\u4e00\u500b\u5b8c\u6574\u7684\u3001\u628a Router \u548c Query \u6574\u5408\u5728\u4e00\u8d77\u7684\u7bc4\u4f8b\u3002\u9019\u5927\u6982\u662f AI \u5e6b\u4f60\u751f\u6210\u7684\u7a0b\u5f0f\u78bc\u6703\u9577\u7684\u6a23\u5b50\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6a94\u6848\u7d50\u69cb<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">src\/\n\u251c\u2500\u2500 main.tsx                 \u2190 Router + Query \u521d\u59cb\u5316\n\u251c\u2500\u2500 routes\/\n\u2502   \u251c\u2500\u2500 __root.tsx           \u2190 \u6839\u8def\u7531\uff08context \u5b9a\u7fa9\u3001\u5168\u57df layout\uff09\n\u2502   \u251c\u2500\u2500 index.tsx            \u2190 \u9996\u9801\n\u2502   \u2514\u2500\u2500 posts\/\n\u2502       \u251c\u2500\u2500 index.tsx        \u2190 \/posts\uff08\u5e36\u5206\u9801\u3001\u7be9\u9078\uff09\n\u2502       \u2514\u2500\u2500 $postId.tsx      \u2190 \/posts\/<span class=\"hljs-number\">123<\/span>\uff08\u6587\u7ae0\u8a73\u60c5\uff09\n\u2514\u2500\u2500 api\/\n    \u2514\u2500\u2500 posts.ts             \u2190 query options \u96c6\u4e2d\u7ba1\u7406\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">api\/posts.ts\u2014\u2014\u96c6\u4e2d\u7ba1\u7406 Query Options<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/api\/posts.ts<\/span>\n<span class=\"hljs-keyword\">import<\/span> { z } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'zod'<\/span>\n\n<span class=\"hljs-comment\">\/\/ search params schema<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> postsSearchSchema = z.object({\n  <span class=\"hljs-attr\">page<\/span>: z.number().default(<span class=\"hljs-number\">1<\/span>),\n  <span class=\"hljs-attr\">sort<\/span>: z.enum(&#91;<span class=\"hljs-string\">'date'<\/span>, <span class=\"hljs-string\">'title'<\/span>]).default(<span class=\"hljs-string\">'date'<\/span>),\n})\n\n<span class=\"hljs-keyword\">export<\/span> type PostsSearch = z.infer&lt;<span class=\"hljs-keyword\">typeof<\/span> postsSearchSchema&gt;\n\n<span class=\"hljs-comment\">\/\/ Query Options<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> postsQueryOptions = <span class=\"hljs-function\">(<span class=\"hljs-params\">search: PostsSearch<\/span>) =&gt;<\/span> ({\n  <span class=\"hljs-attr\">queryKey<\/span>: &#91;<span class=\"hljs-string\">'posts'<\/span>, <span class=\"hljs-string\">'list'<\/span>, search] <span class=\"hljs-keyword\">as<\/span> <span class=\"hljs-keyword\">const<\/span>,\n  <span class=\"hljs-attr\">queryFn<\/span>: <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> res = <span class=\"hljs-keyword\">await<\/span> fetch(\n      <span class=\"hljs-string\">`\/api\/posts?page=<span class=\"hljs-subst\">${search.page}<\/span>&amp;sort=<span class=\"hljs-subst\">${search.sort}<\/span>`<\/span>\n    )\n    <span class=\"hljs-keyword\">if<\/span> (!res.ok) <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">`HTTP <span class=\"hljs-subst\">${res.status}<\/span>`<\/span>)\n    <span class=\"hljs-keyword\">return<\/span> res.json() <span class=\"hljs-keyword\">as<\/span> <span class=\"hljs-built_in\">Promise<\/span>&lt;{ <span class=\"hljs-attr\">posts<\/span>: Post&#91;]; totalPages: number }&gt;\n  },\n})\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> postDetailQueryOptions = <span class=\"hljs-function\">(<span class=\"hljs-params\">postId: string<\/span>) =&gt;<\/span> ({\n  <span class=\"hljs-attr\">queryKey<\/span>: &#91;<span class=\"hljs-string\">'posts'<\/span>, <span class=\"hljs-string\">'detail'<\/span>, postId] <span class=\"hljs-keyword\">as<\/span> <span class=\"hljs-keyword\">const<\/span>,\n  <span class=\"hljs-attr\">queryFn<\/span>: <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> res = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`\/api\/posts\/<span class=\"hljs-subst\">${postId}<\/span>`<\/span>)\n    <span class=\"hljs-keyword\">if<\/span> (!res.ok) <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">`HTTP <span class=\"hljs-subst\">${res.status}<\/span>`<\/span>)\n    <span class=\"hljs-keyword\">return<\/span> res.json() <span class=\"hljs-keyword\">as<\/span> <span class=\"hljs-built_in\">Promise<\/span>&lt;Post&gt;\n  },\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">routes\/posts\/index.tsx\u2014\u2014\u5217\u8868\u9801\uff08Ensure \u6a21\u5f0f + Search Params\uff09<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/posts\/index.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createFileRoute } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { useQuery } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-query'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { postsSearchSchema, postsQueryOptions } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/..\/api\/posts'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/'<\/span>)({\n  <span class=\"hljs-comment\">\/\/ \u9a57\u8b49 search params<\/span>\n  <span class=\"hljs-attr\">validateSearch<\/span>: postsSearchSchema,\n\n  <span class=\"hljs-comment\">\/\/ loader\uff1a\u8def\u7531\u5339\u914d\u5f8c\u3001\u5143\u4ef6\u6e32\u67d3\u524d\u57f7\u884c<\/span>\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-keyword\">async<\/span> ({ search, context }) =&gt; {\n    <span class=\"hljs-keyword\">await<\/span> context.queryClient.ensureQueryData(\n      postsQueryOptions(search)\n    )\n  },\n\n  <span class=\"hljs-comment\">\/\/ Pending UI<\/span>\n  <span class=\"hljs-attr\">pendingComponent<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\u8f09\u5165\u6587\u7ae0\u5217\u8868\u4e2d...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>,\n  <span class=\"hljs-attr\">pendingMs<\/span>: <span class=\"hljs-number\">500<\/span>,\n\n  <span class=\"hljs-comment\">\/\/ \u932f\u8aa4\u756b\u9762<\/span>\n  <span class=\"hljs-attr\">errorComponent<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ error }<\/span>) =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\u7121\u6cd5\u8f09\u5165\u6587\u7ae0\u5217\u8868\uff1a{error.message}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  ),\n\n  <span class=\"hljs-attr\">component<\/span>: PostList,\n})\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">PostList<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> search = Route.useSearch()\n  <span class=\"hljs-keyword\">const<\/span> { data } = useQuery(postsQueryOptions(search))\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\u6587\u7ae0\u5217\u8868<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n        {data.posts.map(post =&gt; (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{post.id}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n              <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/posts\/$postId\"<\/span>\n              <span class=\"hljs-attr\">params<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">postId:<\/span> <span class=\"hljs-attr\">String<\/span>(<span class=\"hljs-attr\">post.id<\/span>) }}\n            &gt;<\/span>\n              {post.title}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n        ))}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n\n      {\/* \u5206\u9801 *\/}\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        {search.page &gt; 1 &amp;&amp; (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/posts\"<\/span> <span class=\"hljs-attr\">search<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">...search<\/span>, <span class=\"hljs-attr\">page:<\/span> <span class=\"hljs-attr\">search.page<\/span> <span class=\"hljs-attr\">-<\/span> <span class=\"hljs-attr\">1<\/span> }}&gt;<\/span>\n            \u4e0a\u4e00\u9801\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        )}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span> \u7b2c {search.page} \u9801 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        {search.page <span class=\"hljs-tag\">&lt; <span class=\"hljs-attr\">data.totalPages<\/span> &amp;&amp; (\n          &lt;<span class=\"hljs-attr\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/posts\"<\/span> <span class=\"hljs-attr\">search<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">...search<\/span>, <span class=\"hljs-attr\">page:<\/span> <span class=\"hljs-attr\">search.page<\/span> + <span class=\"hljs-attr\">1<\/span> }}&gt;<\/span>\n            \u4e0b\u4e00\u9801\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        )}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  )\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">routes\/posts\/$postId.tsx\u2014\u2014\u8a73\u60c5\u9801<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/routes\/posts\/$postId.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { createFileRoute } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { useQuery } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@tanstack\/react-query'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { postDetailQueryOptions } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/..\/api\/posts'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Route = createFileRoute(<span class=\"hljs-string\">'\/posts\/$postId'<\/span>)({\n  <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-keyword\">async<\/span> ({ params, context }) =&gt; {\n    <span class=\"hljs-keyword\">await<\/span> context.queryClient.ensureQueryData(\n      postDetailQueryOptions(params.postId)\n    )\n  },\n  <span class=\"hljs-attr\">pendingComponent<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\u8f09\u5165\u6587\u7ae0\u4e2d...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>,\n  <span class=\"hljs-attr\">errorComponent<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ error }<\/span>) =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\u627e\u4e0d\u5230\u6587\u7ae0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{error.message}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  ),\n  <span class=\"hljs-attr\">component<\/span>: PostDetail,\n})\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">PostDetail<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> { postId } = Route.useParams()\n  <span class=\"hljs-keyword\">const<\/span> { <span class=\"hljs-attr\">data<\/span>: post } = useQuery(postDetailQueryOptions(postId))\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">article<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{post.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{post.body}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">article<\/span>&gt;<\/span><\/span>\n  )\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u6838\u5fc3\u6982\u5ff5\u7ffb\u8b6f<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u4f60\u6703\u770b\u5230<\/th>\n<th>\u610f\u601d<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>createRootRouteWithContext&lt;{queryClient}&gt;()<\/code><\/td>\n<td>\u5efa\u7acb\u6839\u8def\u7531\uff0c\u8b93\u6240\u6709\u5b50\u8def\u7531\u80fd\u5b58\u53d6 queryClient<\/td>\n<\/tr>\n<tr>\n<td><code>context: { queryClient }<\/code><\/td>\n<td>\u5728\u5efa\u7acb Router \u6642\u628a queryClient \u653e\u9032\u5171\u4eab\u80cc\u5305<\/td>\n<\/tr>\n<tr>\n<td><code>loader: ({ params, search, context })<\/code><\/td>\n<td>\u8def\u7531\u5339\u914d\u5f8c\u3001\u5143\u4ef6\u6e32\u67d3\u524d\u57f7\u884c\u7684\u8cc7\u6599\u6293\u53d6\u51fd\u5f0f<\/td>\n<\/tr>\n<tr>\n<td><code>ensureQueryData(options)<\/code><\/td>\n<td>\u78ba\u4fdd\u5feb\u53d6\u6709\u8cc7\u6599\u2014\u2014\u6709\u5c31\u7528\uff0c\u6c92\u6709\u5c31\u7b49\u6293\u5b8c<\/td>\n<\/tr>\n<tr>\n<td><code>prefetchQuery(options)<\/code><\/td>\n<td>\u958b\u59cb\u6293\u8cc7\u6599\u4f46\u4e0d\u7b49\u7d50\u679c\u2014\u2014\u642d\u914d useSuspenseQuery \u4f7f\u7528<\/td>\n<\/tr>\n<tr>\n<td><code>useSuspenseQuery(options)<\/code><\/td>\n<td>\u8cc7\u6599\u6c92\u5230\u5c31\u66ab\u505c\u6e32\u67d3\uff0c\u642d\u914d Suspense boundary \u4f7f\u7528<\/td>\n<\/tr>\n<tr>\n<td><code>pendingComponent<\/code><\/td>\n<td>loader \u7b49\u5f85\u6642\u986f\u793a\u7684\u756b\u9762<\/td>\n<\/tr>\n<tr>\n<td><code>pendingMs<\/code> \/ <code>pendingMinMs<\/code><\/td>\n<td>\u63a7\u5236 pending \u756b\u9762\u7684\u51fa\u73fe\u548c\u6700\u77ed\u986f\u793a\u6642\u9593<\/td>\n<\/tr>\n<tr>\n<td><code>errorComponent<\/code><\/td>\n<td>loader \u51fa\u932f\u6642\u986f\u793a\u7684\u756b\u9762<\/td>\n<\/tr>\n<tr>\n<td><code>validateSearch<\/code> + <code>search<\/code> in loader<\/td>\n<td>\u7528\u9a57\u8b49\u904e\u7684 search params \u7d44\u5408 queryKey<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u770b\u5230 AI \u751f\u6210\u4e86 Router + Query \u6574\u5408\u7684\u7a0b\u5f0f\u78bc\u6642\uff0c\u78ba\u8a8d\u9019\u4e9b\u4e8b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>[ ] <strong>\u6839\u8def\u7531\u6709\u7528 <code>createRootRouteWithContext<\/code> \u55ce\uff1f<\/strong> \u5982\u679c loader \u88e1\u8981\u7528 queryClient\uff0c\u6839\u8def\u7531\u5fc5\u9808\u7528\u9019\u500b API \u5b9a\u7fa9 context<\/li>\n\n\n<li>[ ] <strong>createRouter \u6709\u50b3\u5165 <code>context: { queryClient }<\/code> \u55ce\uff1f<\/strong> \u6c92\u50b3\u7684\u8a71 loader \u88e1\u9762\u62ff\u4e0d\u5230 queryClient<\/li>\n\n\n<li>[ ] <strong>loader \u548c\u5143\u4ef6\u7528\u7684 queryKey \u4e00\u81f4\u55ce\uff1f<\/strong> \u6700\u597d\u7684\u505a\u6cd5\u662f\u62bd\u6210\u5171\u7528\u7684 queryOptions \u51fd\u5f0f<\/li>\n\n\n<li>[ ] <strong>ensureQueryData \u548c prefetchQuery \u6709\u641e\u6e05\u695a\u5dee\u5225\u55ce\uff1f<\/strong> \u524d\u8005 await\uff08\u7b49\u8cc7\u6599\uff09\uff0c\u5f8c\u8005\u4e0d await\uff08\u4e0d\u7b49\uff09<\/li>\n\n\n<li>[ ] <strong>\u7528 prefetchQuery \u6642\uff0c\u5143\u4ef6\u6709\u7528 <code>useSuspenseQuery<\/code> \u55ce\uff1f<\/strong> \u7528\u666e\u901a <code>useQuery<\/code> \u7684\u8a71\u8cc7\u6599\u53ef\u80fd\u9084\u6c92\u5230<\/li>\n\n\n<li>[ ] <strong>\u6709\u5206\u9801\/\u7be9\u9078\u7684\u9801\u9762\u6709 <code>validateSearch<\/code> \u55ce\uff1f<\/strong> search params \u61c9\u8a72\u662f\u9a57\u8b49\u904e\u7684\uff0c\u4e0d\u662f\u81ea\u5df1 parse \u7684<\/li>\n\n\n<li>[ ] <strong>search params \u6709\u653e\u9032 queryKey \u55ce\uff1f<\/strong> \u4e0d\u540c\u7684\u5206\u9801\/\u7be9\u9078\u689d\u4ef6\u61c9\u8a72\u662f\u4e0d\u540c\u7684\u5feb\u53d6<\/li>\n\n\n<li>[ ] <strong>\u6709 pendingComponent \u6216 errorComponent \u55ce\uff1f<\/strong> \u4f7f\u7528\u8005\u9700\u8981\u77e5\u9053\u767c\u751f\u4e86\u4ec0\u9ebc\u4e8b<\/li>\n\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5fc5\u770b\u61c2 vs \u77e5\u9053\u5c31\u597d<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5fc5\u770b\u61c2\uff08\u672c\u7cfb\u5217\u6703\u4e00\u76f4\u51fa\u73fe\uff09<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u6982\u5ff5<\/th>\n<th>\u70ba\u4ec0\u9ebc\u91cd\u8981<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>ensureQueryData<\/code> in loader<\/td>\n<td>\u6700\u5e38\u898b\u7684\u6574\u5408\u6a21\u5f0f\uff0c\u6bcf\u500b\u6709\u8cc7\u6599\u7684\u9801\u9762\u90fd\u6703\u7528<\/td>\n<\/tr>\n<tr>\n<td>\u5171\u7528 query options<\/td>\n<td>\u78ba\u4fdd loader \u548c\u5143\u4ef6\u7684 queryKey \u4e00\u81f4<\/td>\n<\/tr>\n<tr>\n<td><code>context.queryClient<\/code><\/td>\n<td>\u5728 loader \u88e1\u9762\u64cd\u4f5c\u5feb\u53d6\u7684\u552f\u4e00\u65b9\u5f0f<\/td>\n<\/tr>\n<tr>\n<td><code>validateSearch<\/code> + loader \u7684 <code>search<\/code><\/td>\n<td>\u5206\u9801\u3001\u7be9\u9078\u3001\u6392\u5e8f\u9801\u9762\u7684\u6a19\u6e96\u505a\u6cd5<\/td>\n<\/tr>\n<tr>\n<td><code>pendingComponent<\/code> \/ <code>errorComponent<\/code><\/td>\n<td>\u57fa\u672c\u7684 UX \u8655\u7406<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u77e5\u9053\u5c31\u597d\uff08\u9047\u5230\u518d\u67e5\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>prefetchQuery + useSuspenseQuery<\/strong>\uff1a\u9032\u968e\u7684 Prefetch \u6a21\u5f0f\uff0c\u9700\u8981\u7406\u89e3 Suspense boundary<\/li>\n\n\n<li><strong>Deferred Data<\/strong>\uff1aloader \u56de\u50b3 Promise\uff0c\u5143\u4ef6\u7528 <code>Await<\/code> \u5143\u4ef6\u7b49\u5f85\uff08\u90e8\u5206\u8cc7\u6599\u5148\u986f\u793a\uff09<\/li>\n\n\n<li><strong>Route Preloading<\/strong>\uff1a\u6ed1\u9f20 hover \u5230 Link \u4e0a\u5c31\u958b\u59cb prefetch\uff08\u9032\u4e00\u6b65\u512a\u5316\u9ad4\u9a57\uff09<\/li>\n\n\n<li><strong>Streaming<\/strong>\uff1a\u642d\u914d Server Functions \u505a\u8cc7\u6599\u4e32\u6d41\uff08\u9700\u8981 SSR \u74b0\u5883\uff09<\/li>\n\n\n<li><strong>Critical vs Non-Critical Data<\/strong>\uff1a\u5728 loader \u4e2d\u5340\u5206\u54ea\u4e9b\u8cc7\u6599\u5fc5\u9808\u7b49\u3001\u54ea\u4e9b\u53ef\u4ee5\u5ef6\u9072<\/li>\n\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u672c\u7bc7\u5c0f\u7d50<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u7bc7\u5e6b\u4f60\u770b\u61c2\u4e86 TanStack Router \u548c TanStack Query \u6574\u5408\u7684\u6838\u5fc3\u6982\u5ff5\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li><strong>Loading \u7011\u5e03\u6d41\u554f\u984c<\/strong>\u2014\u2014\u5143\u4ef6\u5167\u6293\u8cc7\u6599\u6703\u5c0e\u81f4\u4e32\u806f\u7b49\u5f85\uff0c\u5728\u8def\u7531\u7684 loader \u5c64\u8655\u7406\u53ef\u4ee5\u4e26\u884c\u6293\u53d6<\/li>\n\n\n<li><strong>routerContext \u8a2d\u5b9a<\/strong>\u2014\u2014\u628a queryClient \u653e\u9032 Router \u7684 context\uff0c\u8b93\u6240\u6709 loader \u90fd\u80fd\u4f7f\u7528<\/li>\n\n\n<li><strong>Ensure \u6a21\u5f0f<\/strong>\u2014\u2014<code>await ensureQueryData()<\/code>\uff0c\u5feb\u53d6\u6709\u5c31\u7528\u3001\u6c92\u6709\u5c31\u7b49\u6293\u5b8c\u518d\u9032\u9801\u9762<\/li>\n\n\n<li><strong>Prefetch \u6a21\u5f0f<\/strong>\u2014\u2014<code>prefetchQuery()<\/code>\uff08\u4e0d await\uff09\uff0c\u958b\u59cb\u6293\u4f46\u4e0d\u7b49\uff0c\u5143\u4ef6\u7528 <code>useSuspenseQuery<\/code> \u63a5\u624b<\/li>\n\n\n<li><strong>\u5171\u7528 Query Options<\/strong>\u2014\u2014\u62bd\u6210\u51fd\u5f0f\u78ba\u4fdd loader \u548c\u5143\u4ef6\u7684 queryKey \u4e00\u81f4<\/li>\n\n\n<li><strong>Search Params \u9a45\u52d5\u67e5\u8a62<\/strong>\u2014\u2014URL \u662f single source of truth\uff0c\u5206\u4eab\u9023\u7d50\u5c31\u80fd\u9084\u539f\u72c0\u614b<\/li>\n\n\n<li><strong>Pending UI \u548c Error \u8655\u7406<\/strong>\u2014\u2014<code>pendingComponent<\/code>\u3001<code>errorComponent<\/code> \u7d66\u4f7f\u7528\u8005\u9069\u7576\u7684\u56de\u994b<\/li>\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0b\u4e00\u7bc7\u662f\u7cfb\u5217\u6700\u5f8c\u4e00\u7bc7\uff0c\u6211\u5011\u6703\u7528 Supabase \u4f5c\u70ba BaaS\uff0c\u628a\u524d\u9762\u5b78\u5230\u7684\u6240\u6709\u6982\u5ff5\u4e32\u8d77\u4f86\uff0c\u6253\u9020\u4e00\u500b\u5b8c\u6574\u7684 CRUD \u61c9\u7528\u3002<\/p>\n\n\n\n<div id=\"quiz-fc9a9cd5\">\n<style>\n#quiz-fc9a9cd5 .badge {\n        display: inline-block;\n        padding: 4px 10px;\n        border-radius: 12px;\n        font-size: 0.75em;\n        font-weight: bold;\n        margin-left: 8px;\n      }#quiz-fc9a9cd5 .badge.scenario {\n        background: #ebf8ff;\n        color: #2b6cb0;\n      }#quiz-fc9a9cd5 .badge.debug {\n        background: #fef3c7;\n        color: #92400e;\n      }#quiz-fc9a9cd5 .question-adv {\n        background: white;\n        border-radius: 10px;\n        padding: 24px;\n        margin: 20px 0;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        border-left: 4px solid #ed8936;\n      }#quiz-fc9a9cd5 .question-adv h3 {\n        margin-top: 0;\n        color: #2d3748;\n      }#quiz-fc9a9cd5 .code-block {\n        background: #1e1e1e;\n        color: #d4d4d4;\n        padding: 14px;\n        border-radius: 6px;\n        font-family: \"Menlo\", \"Monaco\", \"Courier New\", monospace;\n        font-size: 0.9em;\n        overflow-x: auto;\n        margin: 12px 0;\n        white-space: pre-wrap;\n      }#quiz-fc9a9cd5 .options-adv {\n        list-style: none;\n        padding: 0;\n      }#quiz-fc9a9cd5 .options-adv li {\n        padding: 14px 16px;\n        margin: 10px 0;\n        border: 2px solid #e2e8f0;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s;\n      }#quiz-fc9a9cd5 .options-adv li:hover:not(.disabled) {\n        border-color: #ed8936;\n        background: #fffaf0;\n      }#quiz-fc9a9cd5 .options-adv li.disabled {\n        cursor: default;\n        opacity: 0.7;\n      }#quiz-fc9a9cd5 .options-adv li.show-answer {\n        border-color: #48bb78;\n        background: #f0fff4;\n      }#quiz-fc9a9cd5 .options-adv li.wrong {\n        border-color: #fc8181;\n        background: #fff5f5;\n      }#quiz-fc9a9cd5 .feedback-adv {\n        margin-top: 16px;\n        padding: 14px;\n        border-radius: 8px;\n        display: none;\n        line-height: 1.6;\n      }#quiz-fc9a9cd5 .feedback-adv.correct {\n        background: #f0fff4;\n        color: #276749;\n        display: block;\n      }#quiz-fc9a9cd5 .feedback-adv.wrong {\n        background: #fff5f5;\n        color: #c53030;\n        display: block;\n      }#quiz-fc9a9cd5 .feedback-adv \n      .score-adv {\n        text-align: center;\n        font-size: 1.4em;\n        padding: 24px;\n        background: white;\n        border-radius: 10px;\n        margin-top: 24px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n      }#quiz-fc9a9cd5 .intro {\n        background: #ebf8ff;\n        padding: 16px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        color: #2c5282;\n      }\n<\/style>\n<h1>\u9032\u968e\u6e2c\u9a57\uff1aRouter + Query \u6574\u5408\uff1aloader \u6a21\u5f0f\u8207\u9810\u53d6\u7b56\u7565<\/h1>\n    <div class=\"intro\">\n      <strong>\u6e2c\u9a57\u76ee\u6a19\uff1a<\/strong>\u9a57\u8b49\u4f60\u662f\u5426\u80fd\u5728\u5be6\u969b\u60c5\u5883\u4e2d\u61c9\u7528\u6240\u5b78\u3002<br \/>\n      \u5171 5 \u984c\uff0c\u5305\u542b\u60c5\u5883\u984c\u8207\u932f\u8aa4\u8a3a\u65b7\u984c\u3002\n    <\/div>\n\n    <!-- \u60c5\u5883\u984c 1 -->\n    <div class=\"question-adv\" id=\"qAdv1\">\n      <h3>1. \u4f60\u6b63\u5728\u958b\u767c\u4e00\u500b\u6587\u7ae0\u8a73\u60c5\u9801\uff0cAPI \u56de\u61c9\u901a\u5e38\u9700\u8981 2-3 \u79d2\u3002PM \u53cd\u6620\u300c\u9ede\u9023\u7d50\u5f8c\u756b\u9762\u5b8c\u5168\u6c92\u53cd\u61c9\uff0c\u4f7f\u7528\u8005\u4ee5\u70ba\u6309\u9215\u58de\u4e86\u300d\u3002\u4f60\u8a72\u600e\u9ebc\u8655\u7406\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <div class=\"code-block\">export const Route = createFileRoute(&#8216;\/posts\/$postId&#8217;)({\n  loader: async ({ params, context }) => {\n    await context.queryClient.ensureQueryData(\n      postDetailQueryOptions(params.postId)\n    )\n  },\n  component: PostDetail,\n})<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(1, 'A', 'C')\">A. \u628a <code>ensureQueryData<\/code> \u63db\u6210 <code>prefetchQuery<\/code>\uff0c\u4e0d\u7b49\u8cc7\u6599\u5c31\u9032\u9801\u9762<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'B', 'C')\">B. \u5728 component \u88e1\u9762\u52a0\u4e00\u500b <code>useState<\/code> \u63a7\u5236 loading \u72c0\u614b<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'C', 'C')\">C. \u52a0\u4e0a <code>pendingComponent<\/code> \u548c <code>pendingMs<\/code>\uff0c\u8b93 loader \u7b49\u5f85\u8d85\u904e\u4e00\u5b9a\u6642\u9593\u5f8c\u986f\u793a loading \u756b\u9762<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'D', 'C')\">D. \u628a loader \u88e1\u7684 <code>await<\/code> \u62ff\u6389\uff0c\u8b93\u9801\u9762\u5148\u5207\u63db<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv1\"><\/div>\n    <\/div>\n\n    <!-- \u60c5\u5883\u984c 2 -->\n    <div class=\"question-adv\" id=\"qAdv2\">\n      <h3>2. \u4f60\u7684\u5217\u8868\u9801\u9700\u8981\u652f\u63f4\u5206\u9801\u548c\u6392\u5e8f\u529f\u80fd\uff0cPM \u8981\u6c42\u300c\u5206\u4eab\u7db2\u5740\u6642\u5c0d\u65b9\u8981\u80fd\u770b\u5230\u4e00\u6a21\u4e00\u6a23\u7684\u5206\u9801\u548c\u6392\u5e8f\u72c0\u614b\u300d\u3002\u4ee5\u4e0b\u54ea\u500b\u67b6\u69cb\u6700\u7b26\u5408\u9700\u6c42\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(2, 'A', 'B')\">A. \u7528 <code>useState<\/code> \u7ba1\u7406 page \u548c sort\uff0c\u5728 <code>useEffect<\/code> \u88e1\u6293\u8cc7\u6599<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'B', 'B')\">B. \u7528 <code>validateSearch<\/code> \u5b9a\u7fa9 search params schema\uff0cloader \u4e2d\u7528 <code>search<\/code> \u53c3\u6578\u6293\u8cc7\u6599\uff0csearch params \u653e\u9032 queryKey<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'C', 'B')\">C. \u7528 React Context \u5132\u5b58\u5206\u9801\u72c0\u614b\uff0c\u900f\u904e Provider \u50b3\u905e\u7d66\u6240\u6709\u5143\u4ef6<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'D', 'B')\">D. \u7528 <code>localStorage<\/code> \u5132\u5b58\u5206\u9801\u548c\u6392\u5e8f\uff0c\u9032\u9801\u9762\u6642\u81ea\u52d5\u8b80\u53d6<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv2\"><\/div>\n    <\/div>\n\n    <!-- \u60c5\u5883\u984c 3 -->\n    <div class=\"question-adv\" id=\"qAdv3\">\n      <h3>3. \u4f60\u7684\u9801\u9762\u6709\u4e09\u500b\u5340\u584a\uff1a\u6a19\u984c\u5217\uff08\u4e0d\u9700\u8981 API\uff09\u3001\u6587\u7ae0\u5167\u5bb9\uff08API \u8f03\u5feb\uff0c\u7d04 200ms\uff09\u3001\u63a8\u85a6\u6587\u7ae0\uff08API \u8f03\u6162\uff0c\u7d04 3 \u79d2\uff09\u3002\u4f60\u5e0c\u671b\u4f7f\u7528\u8005\u80fd\u76e1\u5feb\u770b\u5230\u6a19\u984c\u548c\u6587\u7ae0\u5167\u5bb9\uff0c\u63a8\u85a6\u6587\u7ae0\u53ef\u4ee5\u665a\u9ede\u986f\u793a\u3002\u6700\u9069\u5408\u7684\u505a\u6cd5\u662f\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(3, 'A', 'D')\">A. \u5728 loader \u4e2d\u7528 <code>await ensureQueryData<\/code> \u540c\u6642\u7b49\u5169\u500b API \u5b8c\u6210<\/li>\n        <li onclick=\"checkAnswerAdv(3, 'B', 'D')\">B. \u4e0d\u4f7f\u7528 loader\uff0c\u5168\u90e8\u5728\u5143\u4ef6\u88e1\u7528 <code>useQuery<\/code> \u6293\u8cc7\u6599<\/li>\n        <li onclick=\"checkAnswerAdv(3, 'C', 'D')\">C. \u5728 loader \u4e2d\u53ea\u6293\u6587\u7ae0\u5167\u5bb9\uff0c\u63a8\u85a6\u6587\u7ae0\u5b8c\u5168\u4e0d\u9810\u6293<\/li>\n        <li onclick=\"checkAnswerAdv(3, 'D', 'D')\">D. \u5728 loader \u4e2d\u7528 <code>await ensureQueryData<\/code> \u6293\u6587\u7ae0\u5167\u5bb9\uff0c\u7528 <code>prefetchQuery<\/code>\uff08\u4e0d await\uff09\u958b\u59cb\u6293\u63a8\u85a6\u6587\u7ae0\uff0c\u5143\u4ef6\u4e2d\u7528 <code>useSuspenseQuery<\/code> \u642d\u914d Suspense boundary \u63a5\u624b\u63a8\u85a6\u6587\u7ae0<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv3\"><\/div>\n    <\/div>\n\n    <!-- \u932f\u8aa4\u8a3a\u65b7\u984c 1 -->\n    <div class=\"question-adv\" id=\"qAdv4\">\n      <h3>4. \u540c\u4e8b\u8a2d\u5b9a\u4e86 Router + Query \u7684\u6574\u5408\uff0c\u4f46 loader \u57f7\u884c\u6642\u5831\u932f\uff1a<code>Cannot read properties of undefined (reading 'ensureQueryData')<\/code>\u3002\u4ee5\u4e0b\u662f\u4ed6\u7684\u7a0b\u5f0f\u78bc\uff0c\u554f\u984c\u51fa\u5728\u54ea\u88e1\uff1f <span class=\"badge debug\">\u932f\u8aa4\u8a3a\u65b7<\/span><\/h3>\n      <div class=\"code-block\">\/\/ __root.tsx\nimport { createRootRoute, Outlet } from &#8216;@tanstack\/react-router&#8217;\n\nexport const Route = createRootRoute({\n  component: () => &lt;Outlet \/&gt;,\n})\n\n\/\/ main.tsx\nconst router = createRouter({\n  routeTree,\n})\n\n\/\/ posts\/$postId.tsx\nexport const Route = createFileRoute(&#8216;\/posts\/$postId&#8217;)({\n  loader: async ({ params, context }) => {\n    await context.queryClient.ensureQueryData(&#8230;)\n  },\n})<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(4, 'A', 'B')\">A. <code>ensureQueryData<\/code> \u61c9\u8a72\u6539\u6210 <code>prefetchQuery<\/code><\/li>\n        <li onclick=\"checkAnswerAdv(4, 'B', 'B')\">B. \u6839\u8def\u7531\u7528\u4e86 <code>createRootRoute<\/code> \u800c\u975e <code>createRootRouteWithContext<\/code>\uff0c\u4e14 <code>createRouter<\/code> \u6c92\u6709\u50b3\u5165 <code>context: { queryClient }<\/code><\/li>\n        <li onclick=\"checkAnswerAdv(4, 'C', 'B')\">C. <code>QueryClientProvider<\/code> \u61c9\u8a72\u653e\u5728 <code>RouterProvider<\/code> \u88e1\u9762\u800c\u4e0d\u662f\u5916\u9762<\/li>\n        <li onclick=\"checkAnswerAdv(4, 'D', 'B')\">D. loader \u51fd\u5f0f\u4e0d\u652f\u63f4 async\/await\uff0c\u9700\u8981\u6539\u7528 callback \u5beb\u6cd5<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv4\"><\/div>\n    <\/div>\n\n    <!-- \u932f\u8aa4\u8a3a\u65b7\u984c 2 -->\n    <div class=\"question-adv\" id=\"qAdv5\">\n      <h3>5. \u4f60\u5728 loader \u4e2d\u7528 <code>ensureQueryData<\/code> \u9810\u5148\u6293\u53d6\u4e86\u6587\u7ae0\u8cc7\u6599\uff0c\u4f46\u9801\u9762\u6e32\u67d3\u6642\u5143\u4ef6\u88e1\u7684 <code>useQuery<\/code> \u53c8\u767c\u4e86\u4e00\u6b21\u76f8\u540c\u7684 API \u8acb\u6c42\u3002\u4ee5\u4e0b\u662f\u7a0b\u5f0f\u78bc\uff0c\u6700\u53ef\u80fd\u7684\u554f\u984c\u662f\u4ec0\u9ebc\uff1f <span class=\"badge debug\">\u932f\u8aa4\u8a3a\u65b7<\/span><\/h3>\n      <div class=\"code-block\">\/\/ loader\nloader: async ({ params, context }) => {\n  await context.queryClient.ensureQueryData({\n    queryKey: [&#8216;posts&#8217;, params.postId],\n    queryFn: () => fetchPost(params.postId),\n  })\n}\n\n\/\/ component\nfunction PostDetail() {\n  const { postId } = Route.useParams()\n  const { data } = useQuery({\n    queryKey: [&#8216;post&#8217;, postId],   \/\/ &lt;&#8211; \u6ce8\u610f\u9019\u884c\n    queryFn: () => fetchPost(postId),\n  })\n  return &lt;h1&gt;{data?.title}&lt;\/h1&gt;\n}<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(5, 'A', 'C')\">A. <code>ensureQueryData<\/code> \u4e0d\u6703\u628a\u8cc7\u6599\u5b58\u9032\u5feb\u53d6\uff0c\u9700\u8981\u6539\u7528 <code>fetchQuery<\/code><\/li>\n        <li onclick=\"checkAnswerAdv(5, 'B', 'C')\">B. <code>staleTime<\/code> \u8a2d\u5b9a\u70ba 0\uff0c\u5c0e\u81f4\u8cc7\u6599\u7acb\u523b\u904e\u671f\u88ab\u91cd\u65b0\u6293\u53d6<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'C', 'C')\">C. loader \u7528\u7684 queryKey \u662f <code>['posts', postId]<\/code>\uff08\u6709 s\uff09\uff0c\u5143\u4ef6\u7528\u7684\u662f <code>['post', postId]<\/code>\uff08\u6c92\u6709 s\uff09\uff0ckey \u4e0d\u4e00\u81f4\u5c0e\u81f4\u5feb\u53d6\u6c92\u547d\u4e2d<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'D', 'C')\">D. <code>useQuery<\/code> \u4e0d\u652f\u63f4\u5f9e loader \u7684\u5feb\u53d6\u8b80\u53d6\u8cc7\u6599\uff0c\u61c9\u8a72\u6539\u7528 <code>useSuspenseQuery<\/code><\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv5\"><\/div>\n    <\/div>\n\n    <div class=\"score-adv\" id=\"scoreAdv\" style=\"display:none;\"><\/div>\n<script>\n\n      let answeredAdv = 0;\n      let correctAdv = 0;\n      const totalAdv = 5;\n      const explanationsAdv = {\n        1: \"\u4f7f\u7528 Ensure \u6a21\u5f0f\u6642\uff0cloader \u6703\u7b49\u8cc7\u6599\u6293\u5b8c\u624d\u5207\u63db\u9801\u9762\u3002\u5982\u679c API \u56de\u61c9\u8f03\u6162\uff0c\u4f7f\u7528\u8005\u6703\u89ba\u5f97\u300c\u6c92\u53cd\u61c9\u300d\u3002\u6b63\u78ba\u505a\u6cd5\u662f\u52a0\u4e0a <code>pendingComponent<\/code> \u642d\u914d <code>pendingMs<\/code>\uff08\u4f8b\u5982 1000ms\uff09\uff0c\u8b93\u8d85\u904e\u4e00\u5b9a\u6642\u9593\u624d\u986f\u793a loading \u6307\u793a\u5668\u3002\u9078\u9805 A \u96d6\u7136\u53ef\u884c\uff0c\u4f46\u6703\u6539\u8b8a\u6574\u500b\u9801\u9762\u7684\u8f09\u5165\u7b56\u7565\uff0c\u9700\u8981\u984d\u5916\u8655\u7406 Suspense boundary\uff0c\u4e0d\u662f\u6700\u76f4\u63a5\u7684\u89e3\u6cd5\u3002\u9078\u9805 D \u62ff\u6389 await \u4f46\u6c92\u6709\u642d\u914d <code>useSuspenseQuery<\/code>\uff0c\u5143\u4ef6\u88e1\u7684 <code>useQuery<\/code> \u6703\u56de\u5230\u300c\u6709 isLoading \u72c0\u614b\u300d\u7684\u6a21\u5f0f\uff0c\u7b49\u65bc\u7e5e\u904e\u4e86 loader \u7684\u7528\u610f\u3002\",\n        2: \"\u8981\u8b93\u5206\u4eab\u7db2\u5740\u80fd\u9084\u539f\u5206\u9801\u548c\u6392\u5e8f\u72c0\u614b\uff0c\u5c31\u8981\u8b93 URL \u6210\u70ba single source of truth\u3002\u4f7f\u7528 <code>validateSearch<\/code> \u5b9a\u7fa9 schema\uff0cloader \u900f\u904e <code>search<\/code> \u53c3\u6578\u53d6\u5f97\u9a57\u8b49\u904e\u7684\u503c\uff0c\u518d\u5c07 search params \u653e\u9032 queryKey\uff0c\u9019\u6a23\u4e0d\u540c\u7684\u5206\u9801\/\u6392\u5e8f\u5c31\u6709\u5404\u81ea\u7684\u5feb\u53d6\u3002\u9078\u9805 A \u7528 <code>useState<\/code> \u7ba1\u7406\u72c0\u614b\uff0c\u5206\u4eab\u7db2\u5740\u6642\u5c0d\u65b9\u770b\u4e0d\u5230\u9019\u4e9b\u72c0\u614b\u3002\u9078\u9805 C \u548c D \u540c\u7406\u2014\u2014React Context \u548c localStorage \u7684\u72c0\u614b\u90fd\u4e0d\u5728 URL \u88e1\uff0c\u5206\u4eab\u9023\u7d50\u7121\u6cd5\u9084\u539f\u3002\",\n        3: \"\u9019\u662f\u6df7\u5408\u4f7f\u7528 Ensure \u6a21\u5f0f\u548c Prefetch \u6a21\u5f0f\u7684\u7d93\u5178\u5834\u666f\u3002\u6587\u7ae0\u5167\u5bb9\u662f\u5fc5\u8981\u8cc7\u6599\uff0c\u7528 <code>await ensureQueryData<\/code> \u78ba\u4fdd\u9032\u9801\u9762\u6642\u5c31\u6709\uff1b\u63a8\u85a6\u6587\u7ae0\u53ef\u4ee5\u5ef6\u9072\uff0c\u7528 <code>prefetchQuery<\/code>\uff08\u4e0d await\uff09\u5148\u89f8\u767c\u8acb\u6c42\uff0c\u5143\u4ef6\u4e2d\u7528 <code>useSuspenseQuery<\/code> \u642d\u914d Suspense boundary \u63a5\u624b\u3002\u9078\u9805 A \u6703\u7b49\u5169\u500b API \u90fd\u5b8c\u6210\uff0c\u4f7f\u7528\u8005\u8981\u7b49 3 \u79d2\u624d\u80fd\u770b\u5230\u9801\u9762\u3002\u9078\u9805 B \u653e\u68c4\u4e86 loader \u7684\u512a\u52e2\uff0c\u56de\u5230\u7011\u5e03\u6d41\u554f\u984c\u3002\u9078\u9805 C \u63a8\u85a6\u6587\u7ae0\u5b8c\u5168\u4e0d\u9810\u6293\uff0c\u6d6a\u8cbb\u4e86 loader \u53ef\u4ee5\u63d0\u524d\u89f8\u767c\u8acb\u6c42\u7684\u6a5f\u6703\u3002\",\n        4: \"\u932f\u8aa4\u8a0a\u606f\u662f <code>Cannot read properties of undefined (reading 'ensureQueryData')<\/code>\uff0c\u4ee3\u8868 <code>context.queryClient<\/code> \u662f <code>undefined<\/code>\u3002\u539f\u56e0\u6709\u5169\u500b\uff1a(1) \u6839\u8def\u7531\u7528\u4e86 <code>createRootRoute<\/code> \u800c\u4e0d\u662f <code>createRootRouteWithContext<\/code>\uff0c\u6c92\u6709\u5b9a\u7fa9 context \u578b\u5225\uff1b(2) <code>createRouter<\/code> \u6c92\u6709\u50b3\u5165 <code>context: { queryClient }<\/code>\u3002\u5169\u8005\u90fd\u9700\u8981\u4fee\u6b63\uff0cloader \u624d\u80fd\u900f\u904e <code>context.queryClient<\/code> \u5b58\u53d6\u5230\u5feb\u53d6\u7ba1\u7406\u5668\u3002\",\n        5: \"\u4ed4\u7d30\u770b queryKey\uff1aloader \u88e1\u9762\u7528\u7684\u662f <code>['posts', postId]<\/code>\uff08posts \u6709 s\uff09\uff0c\u800c\u5143\u4ef6\u88e1\u7528\u7684\u662f <code>['post', postId]<\/code>\uff08post \u6c92\u6709 s\uff09\u3002TanStack Query \u7528 queryKey \u4f86\u8b58\u5225\u5feb\u53d6\uff0ckey \u4e0d\u4e00\u81f4\u5c31\u662f\u5169\u4efd\u4e0d\u540c\u7684\u5feb\u53d6\u3002loader \u628a\u8cc7\u6599\u5b58\u5728 <code>['posts', '5']<\/code> \u5e95\u4e0b\uff0c\u5143\u4ef6\u53bb <code>['post', '5']<\/code> \u627e\u2014\u2014\u627e\u4e0d\u5230\uff0c\u6240\u4ee5\u53c8\u767c\u4e86\u4e00\u6b21\u8acb\u6c42\u3002\u9019\u5c31\u662f\u6587\u7ae0\u5efa\u8b70\u628a query options \u62bd\u6210\u5171\u7528\u51fd\u5f0f\u7684\u539f\u56e0\uff0c\u907f\u514d\u9019\u7a2e\u624b\u5beb key \u5c0e\u81f4\u7684\u4e0d\u4e00\u81f4\u554f\u984c\u3002\"\n      };\n\n      function checkAnswerAdv(qNum, selected, correctAns) {\n        const question = document.getElementById(\"qAdv\" + qNum);\n        if (question.classList.contains(\"answered\")) return;\n\n        question.classList.add(\"answered\");\n        answeredAdv++;\n\n        const options = question.querySelectorAll(\".options-adv li\");\n        options.forEach((opt) => {\n          opt.classList.add(\"disabled\");\n          if (opt.textContent.startsWith(correctAns + \".\")) {\n            opt.classList.add(\"show-answer\");\n          }\n        });\n\n        const feedback = document.getElementById(\"fbAdv\" + qNum);\n        if (selected === correctAns) {\n          correctAdv++;\n          feedback.className = \"feedback-adv correct\";\n          feedback.innerHTML = \"&#10003; \u6b63\u78ba\uff01\" + explanationsAdv[qNum];\n        } else {\n          feedback.className = \"feedback-adv wrong\";\n          feedback.innerHTML =\n            \"&#10007; \u932f\u8aa4\u3002\u6b63\u78ba\u7b54\u6848\u662f \" + correctAns + \"\u3002\" + explanationsAdv[qNum];\n          options.forEach((opt) => {\n            if (opt.textContent.startsWith(selected + \".\")) {\n              opt.classList.add(\"wrong\");\n            }\n          });\n        }\n\n        if (answeredAdv === totalAdv) {\n          const scoreDiv = document.getElementById(\"scoreAdv\");\n          scoreDiv.style.display = \"block\";\n          let msg = \"\";\n          if (correctAdv === totalAdv) msg = \"&#127919; \u5b8c\u7f8e\uff01\u4f60\u5df2\u7d93\u6e96\u5099\u597d\u5be6\u6230\u4e86\uff01\";\n          else if (correctAdv >= Math.ceil(totalAdv * 0.8))\n            msg = \"&#128170; \u5f88\u68d2\uff01\u518d\u8907\u7fd2\u4e00\u4e0b\u932f\u7684\u984c\u76ee\";\n          else if (correctAdv >= Math.ceil(totalAdv * 0.6))\n            msg = \"&#128214; \u5efa\u8b70\u91cd\u8b80\u76f8\u95dc\u6bb5\u843d\u5f8c\u518d\u8a66\u4e00\u6b21\";\n          else msg = \"&#128260; \u5efa\u8b70\u91cd\u65b0\u95b1\u8b80\u6587\u4ef6\uff0c\u7279\u5225\u6ce8\u610f\u64cd\u4f5c\u6d41\u7a0b\";\n          scoreDiv.innerHTML =\n            \"\u6e2c\u9a57\u5b8c\u6210\uff01\u5f97\u5206\uff1a\" + correctAdv + \" \/ \" + totalAdv + \"<br>\" + msg;\n        }\n      }\n    \n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u6e2c\u9a57\uff1aRouter + Query \u6574\u5408\uff1aloader \u6a21\u5f0f\u8207\u9810\u53d6\u7b56\u7565 \u5171 5 \u984c\uff0c\u9ede\u9078\u7b54\u6848\u5f8c\u6703\u7acb\u5373\u986f\u793a\u7d50\u679c  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rolpb_likes":0,"footnotes":""},"categories":[639],"tags":[649,648,645,278,640],"class_list":["post-718","post","type-post","status-publish","format-standard","hentry","category-react-tanstack","tag-ensurequerydata","tag-loader","tag-search-params","tag-tanstack-query","tag-tanstack-router"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/comments?post=718"}],"version-history":[{"count":0,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/718\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}