技术小白也要轻松入门 Next.js，赶快踩坑之四：路由参数重定向

在上一篇文章中，我们讨论了 Next.js 中的 params 路由和 query 路由，并留下了一个小坑。现在，让我们来解决这个问题。

事实证明，正如我所想的那样，我们可以使用 custom server，然后重新匹配路由渲染的页面就可以了。但是，这样会出现一个小问题：在网速过慢的时候，重新匹配的页面没有渲染出来之前，控制台会出现报错，重新匹配的页面会一直处于加载状态。

为了解决这个问题，我们可以使用 fallback 属性。fallback 属性可以指定一个页面，当路由参数不匹配时渲染该页面。这样，在网速过慢的时候，我们就可以看到 fallback 页面，而不是报错页面了。

具体实现方法如下：

1. 在 pages 目录下创建一个新的页面，命名为 [id].js。

2. 在 [id].js 中，添加以下代码：

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the post content.</p>
    </div>
  );
}

3. 在 pages 目录下创建一个新的页面，命名为 _app.js。

4. 在 _app.js 中，添加以下代码：

import { createNextContext } from 'next/dist/server/context';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 监听路由变化
    router.events.on('routeChangeStart', (url) => {
      // 开始加载
      NProgress.start();
    });

    router.events.on('routeChangeComplete', () => {
      // 加载完成
      NProgress.done();
    });

    router.events.on('routeChangeError', () => {
      // 加载出错
      NProgress.done();
    });
  }, []);

  return (
    <Component {...pageProps} />
  );
}

export default MyApp;

这样，我们就解决了 Next.js 中的路由参数重定向问题。希望本篇文章对您有所帮助！