如何在 React Router 中验证动态路由。
如何在 React Router 中验证动态路由。
源代码： https://github.com/AbdelrhmanAmin/React-Dynamic-Routes-Manager
问题：
为了说明这个问题，让我们以用户的个人资料为例。
我会用参数定义动态路由 用户/：用户ID 并将渲染配置文件组件和组件内部我会得到 用户身份 从 使用参数 和里面 使用效果 我会发出获取请求以获取用户信息。
问题是， 用户身份 真的可以是任何东西……它可能是 12 或者 哈罗莫姆 …由于 React 在客户端完成所有操作，即使有人将 URL 更改为无效的内容，页面组件也会呈现，例如 用户/嗨 或者如果有人试图访问已删除的用户配置文件的 URL。
当然，良好的结构很重要，在获取数据时在页面组件中显示加载指示器以及在获取失败时显示错误消息至关重要……但是，如果我们可以在渲染组件之前获取并验证数据怎么办？
我的解决方案
我构建了一个管理器组件，负责验证获取响应是否正常，如果是，则呈现页面组件。如果不是，则显示 404 页面。
让我带您了解一下我处理过的代码和边缘情况。
首先，我将页面组件包装在管理器组件中，如下所示：
然后，我会向经理传递一个名为 取器 一个将接收参数并返回获取请求的函数。
当用户进入页面时会发生的第一件事是管理器将执行第一个 useEffect，即进行验证的那个。
该功能通过设置 正在加载 为 true （提示：默认为 true 以在第一次渲染时显示加载指示器）并通过 取器 运行页面的参数并等待获取解决。
这 正在加载 将在获取数据时呈现加载屏幕。
然后，它会设置 正在加载 为假并设置 已验证 根据请求状态设置为 true 或 false。
最后。
我希望这对你有好处。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
