6
社区成员
发帖
与我相关
我的任务
分享让我们从头开始为 React 构建一个路由器
如果您是 React 开发人员，您很可能正在使用 Next.js，这是一个用于快速构建和扩展 Web 应用程序的框架。
或者，您可能没有构建企业级应用程序，而是使用 React Router 编写一个小型 React 应用程序。
不管怎样，您可能熟悉路由的概念，但您知道它是如何工作的吗？
今天，我将带头尝试重建 React Router 为您提供的路由器机制的一个相当精简的版本，并为您提供再次重新发明轮子并了解有关路由的更多信息的借口，所以让我们开始路由器和我一起训练和学习一些新东西，因为这是我第一次这样做！
如何？
从现在开始，我所知道的就是 React Router API 的大致样子，以及我们已经可以使用 History API 将路由添加到 JavaScript 应用程序。
当我必须为学校的项目编写没有框架的 JavaScript 应用程序时，我使用这个 Web API 来帮助我们在 JavaScript 应用程序中使用路由，而无需完全重新加载页面来更改 URL。
它确实是一个非常简单的 API：您可以使用 JavaScript 更改 URL，它不会重新加载页面并且......就是这样！
所有关于刷新 UI 的逻辑都将是我们的责任，但为此我们将使用 React，这样我们就不会过度重新发明轮子......
如果你不熟悉 History API，我建议你先停下来，通过阅读官方文档来了解一些关于它的知识，然后再回到这篇文章，以便我们可以一起学习如何实现我们自己的路由器组件因为我需要你！
路由器
我想我们可以首先创建一个Route将路径作为 prop 的组件，以及一个将是我们想要渲染的 JSX 的子组件。听起来不错？
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">RouteProps</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">RouteProps</span><span style="color:var(--syntax-error-color)">>></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
到目前为止，一切都很好。但我们立刻遇到了一个问题：我怎么知道我在哪条路线？
也许，最简单的方法是向 History API 询问当前路径。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">RouteProps</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">RouteProps</span><span style="color:var(--syntax-error-color)">>></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">path</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">location</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">pathname</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
这太棒了，如果我们要测试它，它完全可以工作！
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Route</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">App</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/home"</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Welcome to the home page!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
重定向
让我们尝试添加一个链接，为我们的应用程序添加重定向功能。
它将依赖该window.history.pushState方法将新页面“推送”到客户端的浏览器历史记录中。就像您点击电子商务网站上的链接一样。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">MouseEventHandler</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useCallback</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">LinkProps</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">to</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">LinkProps</span><span style="color:var(--syntax-error-color)">>></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">MouseEventHandler</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">HTMLAnchorElement</span><span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useCallback</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">preventDefault</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">history</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">pushState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">]);</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">a</span> <span style="color:var(--syntax-name-color)">href</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-string-color)">}</span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">a</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
现在我们可以使用它在页面之间导航。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">MouseEventHandler</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useCallback</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">LinkProps</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">to</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">LinkProps</span><span style="color:var(--syntax-error-color)">>></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">MouseEventHandler</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">HTMLAnchorElement</span><span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useCallback</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">preventDefault</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">history</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">pushState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">]);</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">a</span> <span style="color:var(--syntax-name-color)">href</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-string-color)">}</span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">a</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
让我们尝试使用新的测试应用程序来测试它。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Fragment</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Route</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Link</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">App</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Fragment</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">header</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">ul</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/"</span><span style="color:var(--syntax-text-color)">></span>
Home
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/about"</span><span style="color:var(--syntax-text-color)">></span>
About
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">ul</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">header</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/"</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Welcome to the home page!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/about"</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Welcome to the about page!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Fragment</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
好的，路由似乎在浏览器端工作，但在渲染的 React 应用程序上不起作用。为什么？
因为当我们渲染Route组件时，我们没有添加任何反应性数据，也没有添加反应性道具来反应，所以我们只在页面加载后渲染它，就是这样！
如果您尝试通过浏览器的搜索栏手动引导自己，您将看到渲染工作正常。这意味着我们必须使当前路由成为动态数据才能使路由正常工作。
语境
由于我们需要从Link组件传达已单击的路由到Route组件，因此我们可以使用上下文来简化这些组件之间的通信。
我们开工吧！我们将从创建一个上下文开始。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">createContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">RouterContext</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">createContext</span><span style="color:var(--syntax-text-color)">({</span>
<span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">setPath</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{}</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>
然后，我们将创建我们的提供者。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useMemo</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RouterContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RouterContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">RouterProvider</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setPath</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">location</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">pathname</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useMemo</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">setPath</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setPath</span><span style="color:var(--syntax-text-color)">]);</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">RouterContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-string-color)">}</span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">RouterContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
现在我们可以将此提供程序添加到我们的应用程序中。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Route</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Link</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RouterProvider</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./providers/RouterProvider</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">App</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">RouterProvider</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">header</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">ul</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/"</span><span style="color:var(--syntax-text-color)">></span>
Home
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/about"</span><span style="color:var(--syntax-text-color)">></span>
About
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">ul</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">header</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/"</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Welcome to the home page!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/about"</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Welcome to the about page!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">RouterProvider</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
我们可以开始在组件中添加新的上下文Link。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">MouseEventHandler</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useCallback</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RouterContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RouterContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">LinkProps</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">to</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">LinkProps</span><span style="color:var(--syntax-error-color)">>></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">setPath</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">RouterContext</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">MouseEventHandler</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">HTMLAnchorElement</span><span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useCallback</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">preventDefault</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">history</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">pushState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-name-color)">setPath</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setPath</span><span style="color:var(--syntax-text-color)">]);</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">a</span> <span style="color:var(--syntax-name-color)">href</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-string-color)">}</span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">a</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
也在我们的Route组件中。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RouterContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RouterContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">RouteProps</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">RouteProps</span><span style="color:var(--syntax-error-color)">>></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">currentPath</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">RouterContext</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">path</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-name-color)">currentPath</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
巨大的成功！现在它运行良好，就像 React Router 一样。
诀窍是添加一个上下文，以便我们可以通知我们的组件在组件更改变量时Route对变量的任何更改做出反应。pathLink
我们将 保留window.history.pushState在组件中Link是因为我们还需要在浏览器中反映路径变化，而这个 API 就是为此目的而设计的。
后备页面
嗯，这个很棘手，因为我们无法查看源代码是什么样的，我们需要弄清楚这一点才能学习和成长。
那么另一个上下文呢？这样，我们可以创建一个Fallback组件，该组件能够从父上下文中知道没有可用的匹配路由，并且应该渲染该组件。
因此，让我们创建一个新的上下文，这次仅用于我们的路线。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useMemo</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RoutesContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RoutesContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RouterContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RouterContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Routes</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">path</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">RouterContext</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">routes</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setRoutes</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-text-color)">Array</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-error-color)">>></span><span style="color:var(--syntax-text-color)">([]);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">shouldFallback</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useMemo</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">routes</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">some</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">route</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">route</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">routes</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">]);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useMemo</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">routes</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">setRoutes</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">shouldFallback</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">routes</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setRoutes</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">shouldFallback</span><span style="color:var(--syntax-text-color)">]);</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">RoutesContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-string-color)">}</span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">RoutesContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
我们不要忘记更新我们的Route组件，以便它为其父Routes组件注册一个新的路由。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useEffect</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RouterContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RouterContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RoutesContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RoutesContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">RouteProps</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">RouteProps</span><span style="color:var(--syntax-error-color)">>></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">currentPath</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">RouterContext</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">setRoutes</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">RoutesContext</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-name-color)">useEffect</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">setRoutes</span><span style="color:var(--syntax-text-color)">((</span><span style="color:var(--syntax-name-color)">routes</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Array</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">[</span>
<span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">routes</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">path</span>
<span style="color:var(--syntax-text-color)">]</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setRoutes</span><span style="color:var(--syntax-text-color)">]);</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">path</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-name-color)">currentPath</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
现在，我们可以编写我们的Fallback组件了。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RoutesContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../contexts/RoutesContext</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Fallback</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">FunctionComponent</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PropsWithChildren</span><span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">children</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">shouldFallback</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useContext</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">RoutesContext</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">shouldFallback</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
让我们测试一下。
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Route</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Link</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">RouterProvider</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./providers/RouterProvider</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Fallback</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Fallback</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Routes</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Routes</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">App</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">RouterProvider</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">header</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">ul</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/"</span><span style="color:var(--syntax-text-color)">></span>
Home
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/about"</span><span style="color:var(--syntax-text-color)">></span>
About
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Link</span> <span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/undefined"</span><span style="color:var(--syntax-text-color)">></span>
Undefined
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Link</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">ul</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">header</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Routes</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/"</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Welcome to the home page!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"/about"</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Welcome to the about page!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Fallback</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>Page not found<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Fallback</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Routes</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">RouterProvider</span><span style="color:var(--syntax-text-color)">></span>
<span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>
惊人的！只要我们位于正确的匹配页面上，它就会正常工作并显示我们的页面，并且在没有页面与我们组件中的页面匹配的情况下显示后备页面Route。
结局了，各位！
我们在那里做得非常好。我们有一个基本但功能齐全的路由应用程序，您可能已经可以使用我们共同制作的组件了，这些组件是：
- 组件
RouterProvider，用于在组件之间共享当前路径 - 一个
Routes组件，用于帮助Fallback组件知道何时渲染 - 一个
Fallback组件 - 一个
Link组件，用于更新当前路由 - 一个
Route组件，显示当前匹配的路径
这甚至没有触及 React Router 库的所有组件，本文甚至不是这个精彩而强大的库的直接替代品！
如果您想深入挖掘，您可以再次查看 React Router API，并尝试通过添加更多组件（例如嵌套路由、编程路由、搜索参数等）来增强此示例...
我希望您喜欢阅读您所阅读的内容，并且它激励您重新发明轮子，以便更多地了解您正在使用的工具。
如果您想与我们分享精彩的内容，请发表评论，我们下一篇文章见！
...全文
请发表友善的回复…
发表回复
