NextJS 中如何实现组件级路由渲染而非页面级路由？

首先澄清两个认知误区：

• withRouter 只是react-router生态中给脱离路由上下文的组件注入路由属性的工具，本身不提供路由到组件的映射能力，不是实现这个需求的核心
• NextJS 默认的文件系统路由确实会生成实体路径，但完全可以通过自定义路由适配，在不生成实体页面路径的前提下，实现组件级跳转，和你参考的react-router写法逻辑完全一致

路由基础适配 #

因为项目现有路径全部以/#开头，本质就是hash路由模式（路径信息全部存在URL的hash片段中，服务端无法感知，不会触发实体页面路由生成），直接基于HashRouter做路由映射即可，不需要走NextJS默认的Pages/App目录实体路由流程：

• 路由映射直接在全局应用壳层配置，把组件直接绑定到对应路由路径，不需要在pages目录下创建对应实体路由文件，示例配置：

import { HashRouter, Routes, Route } from 'react-router-dom'
// 直接从业务组件目录引入，无路由实体文件
import Settings from '@/components/personal/Settings'
import AuthEntry from '@/components/auth/AuthEntry'

export default function AppShell() {
  return (
    <HashRouter>
      <Routes>
        {/* 认证模块直接作为根路由组件，无独立实体路径 */}
        <Route path="/" element={<AuthEntry />} />
        {/* Settings组件直接映射为路由路径，自动带/#前缀 */}
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </HashRouter>
  )
}

这种配置下，所有路由路径都会自动格式化为/#/xxx的形式，完全匹配项目现有路径规范，且不会生成任何实体页面路径，符合原项目的约束要求。

按钮跳转逻辑实现 #

因为所有组件都被HashRouter上下文包裹，Auth模块内的按钮不需要额外引入withRouter，直接用函数组件支持的useNavigate钩子即可实现跳转：

import { useNavigate } from 'react-router-dom'

export default function AuthEntry() {
  const navigateTo = useNavigate()

  return (
    <button
      onClick={() => {
        // 跳转后实际URL为 /#/settings，完全符合路径规范
        navigateTo('/settings')
      }}
    >
      打开设置
    </button>
  )
}

注意避坑 #

• 不要混用NextJS默认的next/router或next/link做该场景的跳转：这类API默认会生成实体服务端路径，违反项目"不出现认证模块实体路径"的约束
• 仅当子组件脱离了Router的上下文包裹时，才需要用withRouter做高阶组件注入路由props，它本身不承担路由映射的功能，不要把它当成配置路由的核心
• hash路由模式下所有路径变化都只在前端内存和hash片段中完成，服务端不会收到路径变更请求，完全符合项目开发者的路径设计要求

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