mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
992 lines
204 KiB
HTML
992 lines
204 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>React Router 备忘清单
|
||
& reactrouter cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="适合初学者的综合 React Router 6.x 备忘清单
|
||
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="reactrouter,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/reactrouter.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="react-router-备忘清单"><svg viewBox="0 0 256 140" fill="currentColor" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
|
||
<path d="M78.066 92.588c12.818 0 23.209-10.391 23.209-23.21 0-12.817-10.391-23.208-23.21-23.208-12.817 0-23.208 10.39-23.208 23.209 0 12.818 10.391 23.209 23.209 23.209Zm-54.857 46.417c12.818 0 23.209-10.39 23.209-23.209 0-12.817-10.391-23.208-23.21-23.208C10.392 92.588 0 102.978 0 115.796c0 12.818 10.39 23.21 23.209 23.21Zm209.582 0c12.818 0 23.209-10.39 23.209-23.209 0-12.817-10.39-23.208-23.209-23.208-12.818 0-23.209 10.39-23.209 23.208 0 12.818 10.391 23.21 23.21 23.21Z"></path>
|
||
<path d="M156.565 70.357c-.742-7.754-1.12-14.208-7.06-18.744-7.522-5.744-16.044-2.017-26.54-5.806C112.65 43.312 105 34.155 105 23.24 105 10.405 115.578 0 128.626 0c9.665 0 17.974 5.707 21.634 13.883 5.601 10.64 1.96 21.467 8.998 26.921 8.333 6.458 19.568 1.729 32.104 7.848a23.614 23.614 0 0 1 9.84 8.425A22.858 22.858 0 0 1 205 69.718c0 10.915-7.65 20.073-17.964 22.568-10.497 3.789-19.019.062-26.541 5.806-8.46 6.46-3.931 17.267-10.826 28.682-3.913 7.518-11.867 12.663-21.043 12.663-13.048 0-23.626-10.405-23.626-23.24 0-9.323 5.582-17.364 13.638-21.066 12.536-6.12 23.77-1.39 32.104-7.848 4.807-3.726 5.823-9.473 5.823-16.926Z" fill="currentColor"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#react-router-备忘清单"><span class="icon icon-link"></span></a>React Router 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://npmjs.org/package/react-router-dom"><img src="https://img.shields.io/npm/v/react-router-dom.svg?style=flat" alt="NPM version"></a>
|
||
<a href="https://www.npmjs.com/package/react-router-dom"><img src="https://img.shields.io/npm/dm/react-router-dom.svg?style=flat" alt="Downloads"></a>
|
||
<a href="https://github.com/remix-run/react-router/network/dependents"><img src="https://badgen.net/github/dependents-repo/remix-run/react-router" alt="Repo Dependents"></a>
|
||
<a href="https://github.com/remix-run/react-router"><img src="https://badgen.net/badge/icon/Github?icon=github&label" alt="Github repo"></a></p>
|
||
<p style="padding-top: 12px;">适合初学者的综合 <a href="https://reactrouter.com/en/main/start/overview">React Router 6.x</a> 备忘清单</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#安装使用">安装使用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#添加路由器">添加路由器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#根路由">根路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#处理未找到错误">处理未找到错误</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#contacts-用户界面">contacts 用户界面</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#嵌套路由">嵌套路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#客户端路由">客户端路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建联系人">创建联系人</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#加载程序中的-url-参数">加载程序中的 URL 参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#更新数据">更新数据</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#活动链接样式">活动链接样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局待定用户界面">全局待定用户界面</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-formdata-更新联系人">使用 FormData 更新联系人</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#删除记录">删除记录</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#上下文错误">上下文错误</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#首页路由">首页路由</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#取消按钮">取消按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用客户端路由获取提交">使用客户端路由获取提交</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#将-url-同步到表单状态">将 URL 同步到表单状态</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#将输入值与-url-搜索参数同步">将输入值与 URL 搜索参数同步</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#提交变更-forms">提交变更 Forms</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#routers">Routers</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#挑选路由器">挑选路由器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#路由示例">路由示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#createbrowserrouter">createBrowserRouter</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#createhashrouter">createHashRouter</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#creatememoryrouter">createMemoryRouter</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#routerprovider"><RouterProvider></a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#router-components">Router Components</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#browserrouter"><BrowserRouter></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hashrouter"><HashRouter></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#nativerouter"><NativeRouter></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#memoryrouter"><MemoryRouter></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#router"><Router></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#staticrouter"><StaticRouter></a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="安装使用"><a aria-hidden="true" tabindex="-1" href="#安装使用"><span class="icon icon-link"></span></a>安装使用</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> create vite@latest myApp --<span class="token punctuation">\</span>
|
||
</span><span class="code-line"> <span class="token parameter variable">--template</span> react
|
||
</span><span class="code-line"><span class="token comment"># 按照提示操作</span>
|
||
</span><span class="code-line">$ <span class="token builtin class-name">cd</span> <span class="token operator"><</span>myApp<span class="token operator">></span>
|
||
</span><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> react-router-dom <span class="token punctuation">\</span>
|
||
</span><span class="code-line"> localforage <span class="token punctuation">\</span>
|
||
</span><span class="code-line"> match-sorter <span class="token punctuation">\</span>
|
||
</span><span class="code-line"> sort-by
|
||
</span><span class="code-line">$ <span class="token function">npm</span> run dev
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="添加路由器"><a aria-hidden="true" tabindex="-1" href="#添加路由器"><span class="icon icon-link"></span></a>添加路由器</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">"react-dom/client"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> createBrowserRouter<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">RouterProvider</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hello world!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> root<span class="token operator">=</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RouterProvider</span></span> <span class="token attr-name">router</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>router<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="根路由"><a aria-hidden="true" tabindex="-1" href="#根路由"><span class="icon icon-link"></span></a>根路由</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Root</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/root"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="处理未找到错误"><a aria-hidden="true" tabindex="-1" href="#处理未找到错误"><span class="icon icon-link"></span></a>处理未找到错误</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ErrorPage</span></span> <span class="token keyword module">from</span> <span class="token string">"./error-page"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="contacts-用户界面"><a aria-hidden="true" tabindex="-1" href="#contacts-用户界面"><span class="icon icon-link"></span></a><code>contacts</code> 用户界面</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Contact</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/contact"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="嵌套路由"><a aria-hidden="true" tabindex="-1" href="#嵌套路由"><span class="icon icon-link"></span></a>嵌套路由</h3><div class="wrap-body">
|
||
<p><code>src/main.jsx</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code>src/routes/root.jsx</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Outlet</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 所有其他元素 */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>detail<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Outlet</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="客户端路由"><a aria-hidden="true" tabindex="-1" href="#客户端路由"><span class="icon icon-link"></span></a>客户端路由</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">Outlet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Link</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">contacts/1</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Your Name
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">contacts/2</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Your Friend
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="创建联系人"><a aria-hidden="true" tabindex="-1" href="#创建联系人"><span class="icon icon-link"></span></a>创建联系人</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>创建动作并将 <code><form></code> 更改为 <code><Form></code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Outlet</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Link</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> useLoaderData<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">Form</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> getContacts<span class="token punctuation">,</span> createContact
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"../contacts"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> contact <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">createContact</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> contact <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> contacts <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">React Router Contacts</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">New</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Form</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>导入并设置路由上的 <code>action</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Root</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> loader <span class="token keyword module">as</span> rootLoader<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> action <span class="token keyword module">as</span> rootAction<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/root"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> rootAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="加载程序中的-url-参数"><a aria-hidden="true" tabindex="-1" href="#加载程序中的-url-参数"><span class="icon icon-link"></span></a>加载程序中的 URL 参数</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code>:contactId</code> URL 段。 冒号（<pur>:</pur>）具有特殊含义，将其变成“<code>动态段</code>”</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> useLoaderData
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> getContact <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"../contacts"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loader</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> params <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">return</span> <span class="token function">getContact</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span><span class="token property-access">contactId</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Contact</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> contact <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// existing code</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>在路由上配置 <code>loader</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Contact</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> loader <span class="token keyword module">as</span> contactLoader<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/contact"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> rootAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> contactLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="更新数据"><a aria-hidden="true" tabindex="-1" href="#更新数据"><span class="icon icon-link"></span></a>更新数据</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Form</span><span class="token punctuation">,</span> useLoaderData
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">EditContact</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> contact <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">Twitter</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@jack<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>contact<span class="token punctuation">.</span><span class="token property-access">twitter</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">Notes</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>notes<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>contact<span class="token punctuation">.</span><span class="token property-access">notes</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">rows</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">保存</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">取消</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Form</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>添加新的编辑路由</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">EditContact</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/edit"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> rootAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> contactLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId/edit"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">EditContact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> contactLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="活动链接样式"><a aria-hidden="true" tabindex="-1" href="#活动链接样式"><span class="icon icon-link"></span></a>活动链接样式</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">NavLink</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NavLink</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">to</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">contacts/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>contact<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> isActive<span class="token punctuation">,</span> isPending <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token tag"><span class="token script language-javascript"> isActive
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token operator">?</span> <span class="token string">"active"</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token operator">:</span> isPending
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token operator">?</span> <span class="token string">"pending"</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token operator">:</span> <span class="token string">""</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* other code */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">NavLink</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="全局待定用户界面"><a aria-hidden="true" tabindex="-1" href="#全局待定用户界面"><span class="icon icon-link"></span></a>全局待定用户界面</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> useNavigation<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> contacts <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> navigation <span class="token operator">=</span> <span class="token function">useNavigation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>detail<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token tag"><span class="token script language-javascript"> navigation<span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">===</span> <span class="token string">'loading'</span>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token tag"><span class="token script language-javascript"> <span class="token operator">?</span> <span class="token string">'loading'</span> <span class="token operator">:</span> <span class="token string">''</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Outlet</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="使用-formdata-更新联系人"><a aria-hidden="true" tabindex="-1" href="#使用-formdata-更新联系人"><span class="icon icon-link"></span></a>使用 FormData 更新联系人</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<p>向编辑模块添加一个动作</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Form</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> useLoaderData<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> redirect<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> updateContact <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"../contacts"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> request<span class="token punctuation">,</span> params <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> formData <span class="token operator">=</span> <span class="token keyword control-flow">await</span> request<span class="token punctuation">.</span><span class="token method function property-access">formData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> updates <span class="token operator">=</span> <span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">fromEntries</span><span class="token punctuation">(</span>formData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">await</span> <span class="token function">updateContact</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span><span class="token property-access">contactId</span><span class="token punctuation">,</span> updates<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/contacts/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span><span class="token property-access">contactId</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>将动作连接到路由</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">EditContact</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> action <span class="token keyword module">as</span> editAction<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/edit"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> rootAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> contactLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId/edit"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">EditContact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> contactLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> editAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="删除记录"><a aria-hidden="true" tabindex="-1" href="#删除记录"><span class="icon icon-link"></span></a>删除记录</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>destroy<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">"请确认您要删除此记录"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> event<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">删除</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Form</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>添加销毁动作</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>redirect<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>deleteContact<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"../contacts"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> params <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">await</span> <span class="token function">deleteContact</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span><span class="token property-access">contactId</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">"/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>将 <code>destroy</code> 路由添加到路由配置中</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> action <span class="token keyword module">as</span> destroyAction
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/destroy"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId/destroy"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> destroyAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="上下文错误"><a aria-hidden="true" tabindex="-1" href="#上下文错误"><span class="icon icon-link"></span></a>上下文错误</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> params <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"oh dang!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">await</span> <span class="token function">deleteContact</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span><span class="token property-access">contactId</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">"/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>让我们为 <code>destroy</code> 路由创建上下文错误消息：</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"contacts/:contactId/destroy"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> destroyAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">哎呀！有一个错误</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="首页路由"><a aria-hidden="true" tabindex="-1" href="#首页路由"><span class="icon icon-link"></span></a>首页路由</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Index</span></span> <span class="token keyword module">from</span> <span class="token string">"./routes/index"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorElement</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ErrorPage</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">action</span><span class="token operator">:</span> rootAction<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span> <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Index</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="取消按钮"><a aria-hidden="true" tabindex="-1" href="#取消按钮"><span class="icon icon-link"></span></a>取消按钮</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Form</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> useLoaderData<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> redirect<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> useNavigate<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Edit</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> contact <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> navigate <span class="token operator">=</span> <span class="token function">useNavigate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">保存</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token tag"><span class="token script language-javascript"> <span class="token function">navigate</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 取消
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Form</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="使用客户端路由获取提交"><a aria-hidden="true" tabindex="-1" href="#使用客户端路由获取提交"><span class="icon icon-link"></span></a>使用客户端路由获取提交</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>将 <code><form></code> 更改为 <code><Form></code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-form<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search contacts<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Form</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如果有 <code>URLSearchParams</code> 过滤列表</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loader</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> request <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span><span class="token property-access">url</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> q <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token property-access">searchParams</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">"q"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> contacts <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">getContacts</span><span class="token punctuation">(</span>q<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> contacts <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="将-url-同步到表单状态"><a aria-hidden="true" tabindex="-1" href="#将-url-同步到表单状态"><span class="icon icon-link"></span></a>将 URL 同步到表单状态</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loader</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> request <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span><span class="token property-access">url</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> q <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token property-access">searchParams</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">"q"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> contacts <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">getContacts</span><span class="token punctuation">(</span>q<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> contacts<span class="token punctuation">,</span> q <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> contacts<span class="token punctuation">,</span> q <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> navigation <span class="token operator">=</span> <span class="token function">useNavigation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-form<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search contacts<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>q<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* existing code */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Form</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="将输入值与-url-搜索参数同步"><a aria-hidden="true" tabindex="-1" href="#将输入值与-url-搜索参数同步"><span class="icon icon-link"></span></a>将输入值与 URL 搜索参数同步</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> contacts<span class="token punctuation">,</span> q <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> navigation <span class="token operator">=</span> <span class="token function">useNavigation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">"q"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> q<span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>q<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="提交变更-forms"><a aria-hidden="true" tabindex="-1" href="#提交变更-forms"><span class="icon icon-link"></span></a>提交变更 Forms</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> useSubmit<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> contacts<span class="token punctuation">,</span> q <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLoaderData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> navigation <span class="token operator">=</span> <span class="token function">useNavigation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> submit <span class="token operator">=</span> <span class="token function">useSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-form<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search contacts<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>q<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token tag"><span class="token script language-javascript"> <span class="token function">submit</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span><span class="token property-access">currentTarget</span><span class="token punctuation">.</span><span class="token property-access">form</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* existing code */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Form</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="routers"><a aria-hidden="true" tabindex="-1" href="#routers"><span class="icon icon-link"></span></a>Routers</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="挑选路由器"><a aria-hidden="true" tabindex="-1" href="#挑选路由器"><span class="icon icon-link"></span></a>挑选路由器</h3><div class="wrap-body">
|
||
<p>在 v6.4 中，引入了支持新数据 API 的新路由器：</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>createBrowserRouter</code></td><td><a href="https://reactrouter.com/en/main/routers/create-browser-router">#</a></td></tr><tr><td align="left"><code>createMemoryRouter</code></td><td><a href="https://reactrouter.com/en/main/routers/create-memory-router">#</a></td></tr><tr><td align="left"><code>createHashRouter</code></td><td><a href="https://reactrouter.com/en/main/routers/create-hash-router">#</a></td></tr></tbody></table>
|
||
<p>以下路由器不支持数据 <code>data</code> API：</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code><BrowserRouter></code></td><td><a href="https://reactrouter.com/en/main/router-components/browser-router">#</a></td></tr><tr><td align="left"><code><MemoryRouter></code></td><td><a href="https://reactrouter.com/en/main/router-components/memory-router">#</a></td></tr><tr><td align="left"><code><HashRouter></code></td><td><a href="https://reactrouter.com/en/main/router-components/hash-router">#</a></td></tr><tr><td align="left"><code><NativeRouter></code></td><td><a href="https://reactrouter.com/en/main/router-components/native-router">#</a></td></tr><tr><td align="left"><code><StaticRouter></code></td><td><a href="https://reactrouter.com/en/main/router-components/static-router">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="路由示例"><a aria-hidden="true" tabindex="-1" href="#路由示例"><span class="icon icon-link"></span></a>路由示例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<p>快速更新到 v6.4 的最简单方法是从 createRoutesFromElements 获得帮助，因此您无需将 <code><Route></code> 元素转换为路由对象</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> createBrowserRouter<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> createRoutesFromElements<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Route</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">RouterProvider</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">createRoutesFromElements</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dashboard<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Dashboard</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* ... etc. */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Route</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">"root"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RouterProvider</span></span> <span class="token attr-name">router</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>router<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="createbrowserrouter"><a aria-hidden="true" tabindex="-1" href="#createbrowserrouter"><span class="icon icon-link"></span></a>createBrowserRouter</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">"react-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> createBrowserRouter<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">RouterProvider</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Root</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>rootLoader<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./root"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Team</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>teamLoader<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./team"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"team"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Team</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> teamLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> root<span class="token operator">=</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RouterProvider</span></span> <span class="token attr-name">router</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>router<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>Type Declaration</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token parameter"><span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token maybe-class-name">RouteObject</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> opts<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> basename<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token dom variable">window</span><span class="token operator">?</span><span class="token operator">:</span> <span class="token maybe-class-name">Window</span><span class="token punctuation">;</span>
|
||
</span></span><span class="code-line"><span class="token parameter"> <span class="token punctuation">}</span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token maybe-class-name">RemixRouter</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>routes</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"events/:id"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Event</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> eventLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code>basename</code> 用于您无法部署到域的根目录，而是部署到子目录的情况</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">createBrowserRouter</span><span class="token punctuation">(</span>routes<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">basename</span><span class="token operator">:</span> <span class="token string">"/app"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">createBrowserRouter</span><span class="token punctuation">(</span>routes<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">basename</span><span class="token operator">:</span> <span class="token string">"/app"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// results in <a href="/app" /></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">createBrowserRouter</span><span class="token punctuation">(</span>routes<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">basename</span><span class="token operator">:</span> <span class="token string">"/app/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// results in <a href="/app/" /></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="createhashrouter"><a aria-hidden="true" tabindex="-1" href="#createhashrouter"><span class="icon icon-link"></span></a>createHashRouter</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">"react-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> createHashRouter<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">RouterProvider</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Root</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> rootLoader <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./root"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Team</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> teamLoader <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"./team"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createHashRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> rootLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"team"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Team</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">loader</span><span class="token operator">:</span> teamLoader<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> root<span class="token operator">=</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RouterProvider</span></span> <span class="token attr-name">router</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>router<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="creatememoryrouter"><a aria-hidden="true" tabindex="-1" href="#creatememoryrouter"><span class="icon icon-link"></span></a>createMemoryRouter</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">RouterProvider</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> createMemoryRouter<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> render<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> waitFor<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> screen<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"@testing-library/react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token string">"@testing-library/jest-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">CalendarEvent</span></span> <span class="token keyword module">from</span> <span class="token string">"./event"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">"event route"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token constant">FAKE_EVENT</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"测试事件"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/events/:id"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CalendarEvent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">loader</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token constant">FAKE_EVENT</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> router<span class="token operator">=</span><span class="token function">createMemoryRouter</span><span class="token punctuation">(</span>routes<span class="token punctuation">,</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">initialEntries</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token string">"/events/123"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">initialIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RouterProvider</span></span> <span class="token attr-name">router</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>router<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">await</span> <span class="token function">waitFor</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> screen<span class="token punctuation">.</span><span class="token method function property-access">getByRole</span><span class="token punctuation">(</span><span class="token string">"heading"</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>screen<span class="token punctuation">.</span><span class="token method function property-access">getByRole</span><span class="token punctuation">(</span><span class="token string">"heading"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toHaveTextContent</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token constant">FAKE_EVENT</span><span class="token punctuation">.</span><span class="token property-access">name</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>initialEntries</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">createMemoryRouter</span><span class="token punctuation">(</span>routes<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">initialEntries</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token string">"/events/123"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>initialIndex</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">createMemoryRouter</span><span class="token punctuation">(</span>routes<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">initialEntries</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token string">"/events/123"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">initialIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// start at "/events/123"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="routerprovider"><a aria-hidden="true" tabindex="-1" href="#routerprovider"><span class="icon icon-link"></span></a><RouterProvider></h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> createBrowserRouter<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">RouterProvider</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createBrowserRouter</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Root</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"dashboard"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Dashboard</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"about"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">About</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> root<span class="token operator">=</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RouterProvider</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">router</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>router<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">fallbackElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">BigSpinner</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code>fallbackElement</code> 如果您不是服务器渲染您的应用程序，DataBrowserRouter 将在安装时启动所有匹配的路由加载器。 在此期间，您可以提供一个 fallbackElement 来向用户表明该应用程序正在运行</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RouterProvider</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">router</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>router<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">fallbackElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SpinnerOfDoom</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="router-components"><a aria-hidden="true" tabindex="-1" href="#router-components"><span class="icon icon-link"></span></a>Router Components</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="browserrouter"><a aria-hidden="true" tabindex="-1" href="#browserrouter"><span class="icon icon-link"></span></a><BrowserRouter></h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">"react-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">BrowserRouter</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> root<span class="token operator">=</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HashRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 你的应用程序的其余部分在这里 */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">HashRouter</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code><BrowserRouter></code> 使用干净的 <code>URL</code> 将当前位置存储在浏览器的地址栏中，并使用浏览器的内置历史堆栈进行导航</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="hashrouter"><a aria-hidden="true" tabindex="-1" href="#hashrouter"><span class="icon icon-link"></span></a><HashRouter></h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">"react-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">HashRouter</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> root<span class="token operator">=</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HashRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 你的应用程序的其余部分在这里 */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">HashRouter</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code><HashRouter></code> 用于 Web 浏览器，因为某些原因不应（或不能）将 URL 发送到服务器</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="nativerouter"><a aria-hidden="true" tabindex="-1" href="#nativerouter"><span class="icon icon-link"></span></a><NativeRouter></h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token imports"> <span class="token maybe-class-name">NativeRouter</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NativeRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 你的应用程序的其余部分在这里 */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">NativeRouter</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code><NativeRouter></code> 是在 React Native 应用程序中运行 React Router 的推荐接口</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="memoryrouter"><a aria-hidden="true" tabindex="-1" href="#memoryrouter"><span class="icon icon-link"></span></a><MemoryRouter></h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> create <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-test-renderer"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">MemoryRouter</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Routes</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Route</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">"My app"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">"renders correctly"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">let</span> renderer <span class="token operator">=</span> <span class="token function">create</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MemoryRouter</span></span> <span class="token attr-name">initialEntries</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"/users/mjackson"</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>users<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Users</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>:id<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserProfile</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Route</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MemoryRouter</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>renderer<span class="token punctuation">.</span><span class="token method function property-access">toJSON</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code><MemoryRouter></code> 在内部将其位置存储在一个数组中。 与 <code><BrowserHistory></code> 和 <code><HashHistory></code> 不同，它不依赖于外部源，例如浏览器中的历史堆栈。 这使得它非常适合需要完全控制历史堆栈的场景，例如测试</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="router"><a aria-hidden="true" tabindex="-1" href="#router"><span class="icon icon-link"></span></a><Router></h3><div class="wrap-body">
|
||
<p><code><Router></code> 是所有路由器组件（如 <code><BrowserRouter></code> 和 <code><StaticRouter></code>）共享的低级接口。 就 React 而言，<code><Router></code> 是一个上下文提供者，它向应用程序的其余部分提供路由信息</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="staticrouter"><a aria-hidden="true" tabindex="-1" href="#staticrouter"><span class="icon icon-link"></span></a><StaticRouter></h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">ReactDOMServer</span></span> <span class="token keyword module">from</span> <span class="token string">"react-dom/server"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">StaticRouter</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-router-dom/server"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">http</span> <span class="token keyword module">from</span> <span class="token string">"http"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">requestHandler</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">let</span> html <span class="token operator">=</span> <span class="token maybe-class-name">ReactDOMServer</span><span class="token punctuation">.</span><span class="token method function property-access">renderToString</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">StaticRouter</span></span> <span class="token attr-name">location</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>req<span class="token punctuation">.</span><span class="token property-access">url</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 你的应用程序的其余部分在这里 */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">StaticRouter</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> res<span class="token punctuation">.</span><span class="token method function property-access">write</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> res<span class="token punctuation">.</span><span class="token method function property-access">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">http<span class="token punctuation">.</span><span class="token method function property-access">createServer</span><span class="token punctuation">(</span>requestHandler<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://reactrouter.com/">React Router 官网</a></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|