背景
Next.js 是一款流行的 React 框架，它提供了很多便利的功能，比如自动代码分割和服务器端渲染等。而 react-router-dom 则是 React 应用中最常用的路由库之一。在使用 Next.js 进行开发时，我们通常会结合 react-router-dom 来进行路由管理。然而，有时候我们会遇到一些奇怪的问题，比如在使用 react-router-dom 时出现 router 不存在的问题。
问题分析
在使用 react-router-dom 时，我们通常会在 App 组件中使用 Router 组件将我们的路由包裹起来，如下所示：
-- -------------------- ---- ------- ------ - ------------- -- ------- ------- ----- - ---- ------------------- -------- ----- - ------ - -------- -------- ------ ----- --------- ----- -- -------- ------ -------------- ------ -- -------- --------- --------- -- -展开代码
然而，在使用 Next.js 进行开发时，我们通常会使用自定义的 _app.js 文件来进行全局配置，这个文件会在每次页面切换时都会执行。因此，我们通常会在 _app.js 中进行路由的包裹，而不是在 App 组件中。如下所示：
-- -------------------- ---- ------- ------ - ------------- -- ------ - ---- ------------------- -------- ------- ---------- --------- -- - ------ - -------- ---------- -------------- -- --------- -- - ------ ------- ------展开代码
这样做的好处是，我们可以在全局范围内进行一些路由相关的配置，比如添加路由守卫等。然而，在某些情况下，我们会遇到一个奇怪的问题：在页面刷新或者直接访问某个路由时，会出现 “router 不存在” 的错误。
这个问题的原因是，当我们在页面刷新或者直接访问某个路由时，Next.js 会先执行 _app.js 文件，然后再执行对应页面的代码。而在执行 _app.js 文件时，由于页面还没有加载完成，因此 Router 组件还没有被挂载到 DOM 树上，导致路由无法正常工作。
解决方案
为了解决这个问题，我们需要在 _app.js 文件中添加一些额外的逻辑，来保证 Router 组件在页面加载完成后再进行挂载。具体来说，我们需要使用 Next.js 提供的 useEffect 钩子函数，来监听页面的加载状态。当页面加载完成后，我们再将 Router 组件进行挂载。如下所示：
-- -------------------- ---- ------- ------ - ---------- -------- - ---- -------- ------ - ------------- -- ------ - ---- ------------------- -------- ------- ---------- --------- -- - ----- ----------- ------------- - ---------------- ------------ -- - ------------------- -- ---- -- ------------ ------ ----- ------ - -------- ---------- -------------- -- --------- -- - ------ ------- ------展开代码
这样做的原理是，我们在组件挂载后，使用 useEffect 钩子函数来设置一个状态位 isMounted。当这个状态位为 true 时，我们再将 Router 组件进行挂载，从而避免了 “router 不存在” 的问题。
总结
在使用 Next.js 进行开发时，我们通常会结合 react-router-dom 来进行路由管理。然而，在某些情况下，我们会遇到一个奇怪的问题：在页面刷新或者直接访问某个路由时，会出现 “router 不存在” 的错误。这个问题的原因是，当我们在页面刷新或者直接访问某个路由时，Next.js 会先执行 _app.js 文件，然后再执行对应页面的代码。而在执行 _app.js 文件时，由于页面还没有加载完成，导致 Router 组件无法正常工作。为了解决这个问题，我们可以在 _app.js 文件中添加一些额外的逻辑，来保证 Router 组件在页面加载完成后再进行挂载。具体来说，我们需要使用 Next.js 提供的 useEffect 钩子函数，来监听页面的加载状态。当页面加载完成后，我们再将 Router 组件进行挂载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650565ae95b1f8cacd1e51f4
