React Router 组件中出现意外令牌错误
介绍
React Router 是 React 生态系统中一个常用的路由库。React Router 提供了一个声明式且简单的 API 来处理导航和在应用程序中添加页面。开发人员在使用前端应用程序时遇到的最常见错误之一是意外令牌错误。无论您使用哪种框架，您遇到此错误的频率都会比您想象的要高。
与其他 JavaScript 库一样，React 也有一个内置的错误页面，当代码出现问题时，它会呈现在屏幕上。在本指南中，您将了解导致意外令牌错误出现的原因以及如何修复它。
理解问题
在本节中，您将了解 JavaScript 为何会抛出意外的 token 错误。请查看下面的示例。
const randomNum = Math.random();
上面这行代码调用了内置Math对象的random()方法。这是正确的一行，因此不会抛出任何错误。
现在，考虑下面这一行。
const randomNum = Math.random());
请注意，现在末尾多了一个“)”。JavaScript 编译器将无法解析此行并抛出意外的标记错误。
MDN对该错误定义如下。
当预期使用特定语言构造但提供了其他内容时，会发生 JavaScript 异常“意外标记”。这可能是一个简单的拼写错误。
对于开发人员来说幸运的是，代码编辑器中的 linters 会突出显示此类错误，因此开发人员甚至可以在应用程序在浏览器中运行之前修复它。
处理运行时错误
运行时有时会发生错误。请看以下 React 场景。应用程序启动后，它会显示 React 错误页面，提示“意外的令牌‘<’”。
当你看到这个错误时，你开始检查代码，找到有问题的行。但通常，运行时错误是由外部因素引起的。你的代码必须期望从后端服务返回 JSON 数据。相反，它返回的是 XML 格式的数据，JavaScript 编译器无法解析这些数据。
另一个原因可能是 HTML 页面中引用的 JavaScript 文件在服务器上不存在。此行为取决于应用的服务器配置。某些服务器会返回 HTML 响应以显示 HTTP 错误。
但是，如果第一页渲染正常，但后续页面显示意外的 token 错误怎么办？在这种情况下，JavaScript 路径必须相对引用。使用相对路径时，浏览器会尝试相对于页面的当前 URL 加载应用程序。例如，如果使用./app.js路径加载 JavaScript 文件，则在索引页加载时，浏览器会向/app.js发送请求，该请求成功。但是当用户导航到另一个页面时，浏览器会向/another-page/app.js发送请求，这是服务器中的错误路径。
结论
追踪运行时错误可能很麻烦，尤其是当开发工具没有太大帮助时。因此，理解代码并逻辑地找到错误至关重要。
您可以使用调试器语句来控制执行流程并在应用运行时实时检查变量。网络选项卡也是开发工具的一个重要部分，它可以让您在浏览器中查看所有传出的请求和传入的响应。如果您有任何疑问，请随时在Codealphabet上提问。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~