React+Next.js项目中next-routes嵌套路由跳转刷新问题解决咨询

我之前也踩过类似的坑，问题出在你使用<Link>的方式不符合next-routes的规则，导致触发了页面硬刷新。下面是具体的修复步骤，照着调整就能实现无刷新跳转：

1. 优化路由配置（语义化参数名） #

先把路由配置里的参数名改得更贴合业务，这样后续维护更清晰：

// routes.js
const routes = require('next-routes')();

routes.add({
  name: 'products',
  pattern: '/:categoryAlias/filter', // 把:noname改成:categoryAlias，和业务对应
  page: 'products'
});

module.exports = routes;

2. 正确使用next-routes的Link组件 #

必须导入自定义路由模块里的Link，不能用Next.js原生的next/link。跳转时要通过route指定路由名称，params传递动态参数，而不是直接写路径：

import { Link } from '../routes'; // 根据你的routes.js实际路径调整

// 跳转组件的正确写法
<Link route="products" params={{ categoryAlias: 'category_alias' }}>
  <a>Products</a>
</Link>

注意：一定要包裹原生<a>标签，next-routes的Link组件需要依托它来触发客户端无刷新跳转，少了这一步很可能失效。

3. 在_app.js中集成路由实例 #

要让整个应用识别自定义路由规则，需要在pages/_app.js里用next-routes的Router组件包裹应用：

import { Router } from '../routes';

function MyApp({ Component, pageProps }) {
  return (
    <Router>
      <Component {...pageProps} />
    </Router>
  );
}

export default MyApp;

4. 页面中获取动态参数（可选） #

如果products页面需要用到categoryAlias参数，可以通过两种方式获取：

// 方式1：使用withRouter高阶组件
import { withRouter } from '../routes';

function ProductsPage({ router }) {
  const categoryAlias = router.query.categoryAlias;
  return <div>当前分类：{categoryAlias}</div>;
}

export default withRouter(ProductsPage);

// 方式2：使用useRouter钩子（next-routes v2及以上版本支持）
import { useRouter } from '../routes';

function ProductsPage() {
  const router = useRouter();
  const categoryAlias = router.query.categoryAlias;
  return <div>当前分类：{categoryAlias}</div>;
}

export default ProductsPage;

核心问题就是你之前直接把路径字符串传给了route属性，而next-routes要求通过「路由名称+参数」的方式匹配路由，这样它才能识别为自定义路由并触发客户端无刷新跳转。调整后应该就能正常工作了～

内容的提问来源于stack exchange，提问作者user2639674