React 应用程序中的简单路由

一个简单的、可扩展的路由解决方案可以满足您的应用程序的所有需求，而不会引入像 React-Router 这样的工具所提供的复杂性。

进入： 浏览器的 窗口位置 目的。

它提供了为您的应用程序创建一个简单的“路由”系统所需的一切。例如，这里是什么 窗口位置 对象想要此 URL：

http://localhost:3000/books/123456?key=abcd&searchterm=cats ：

那么，如果我们创建一个 路线 解析的功能组件 位置.href 和 位置.路径 寻找严格匹配，否则返回 404 页面。

假设我们有一个小型图书馆应用程序，并且只想显示三个页面：

1. 主页在 /
2. 查看许多书籍的页面 /图书
3. 还有一个页面可以查看单本书的详细信息： /books/{bookID} 在哪里 书号 来自数据库（作为服务，如 firebase）。

由于我们只有几个简单的要求，我们可以使用 窗口位置 做我们的路由。

首先，我们将创建一个枚举来封装具有不同“页面”或路由的概念：

现在，验证房屋的功能（ / ) 和书籍 （/图书 ) 路线：

我们返回 无效的 这里表示给定的 地点 确实不是我们要渲染的；相反，如果 路径名 确实匹配。

现在对于个人书籍路线：

这说明了制作一个简单而强大的路由机制是多么快速和容易。在这里，我们使用正则表达式来匹配位置的路径名，以严格判断路径是否有效。

对于可变路径和 URL 参数，从 URL 中解析它们很简单。这是获取路径参数的示例：

对于 URL 参数：

最后，我们可以将这些函数放在一起 路由器 呈现正确内容的组件：

在这里，我们将验证器放入一个数组并遍历它们，直到我们得到匹配。一旦第一次通过验证发生， 休息 将我们带出迭代器。

笔记 ：由于我们在数组中迭代验证函数，因此需要注意验证的顺序

然后我们检查以确保如果 窗口位置 没有通过我们的任何验证，我们将路线设置为 未找到 .

最后，我们通过 转变 声明，并显示我们要渲染的页面！

你接下来需要做的就是把 路由器 在你的 index.js 文件：

就是这样，让我知道你的想法

跟着我 推特 ！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/18468/30160608