Next.js TypeScript中Lesson无法作为JSX组件及路由报错解决

问题1：Lesson组件无法作为JSX组件使用 #

• 核对组件导出与导入匹配：确保Lesson.tsx使用默认导出，导入时对应写法一致

  // Lesson.tsx 正确默认导出示例
  const Lesson = () => {
    return <div>Lesson Content</div>;
  };
  export default Lesson;
  

  // 导入时写法
  import Lesson from './Lesson';
  

• 明确组件类型标注：给函数组件添加TypeScript类型约束，避免类型推断错误

  import type { FC } from 'react';
  
  const Lesson: FC = () => {
    return <div>Lesson Content</div>;
  };
  export default Lesson;
  

• 检查TS配置：确保tsconfig.json中jsx字段设置符合Next.js要求

  {
    "compilerOptions": {
      "jsx": "preserve",
      // 其他配置项...
    }
  }
  

问题2：解决useRoutes() may be used only in the context of a <Router> component错误 #

Next.js自带完整路由系统，无需依赖React Router的useRoutes，按以下方式调整：

• 切换为Next.js原生路由：
  • 若使用App Router（Next.js 13+）：通过app目录下的文件夹结构定义路由，每个页面文件夹内创建page.tsx作为入口文件
  • 组件内导航使用Next.js的Link组件：

    import Link from 'next/link';
    
    const Nav = () => {
      return (
        <div>
          <Link href="/aspects">Aspects</Link>
          <Link href="/freeform">FreeForm</Link>
          <Link href="/lesson">Lesson</Link>
        </div>
      );
    };
    

• 若必须保留React Router（不推荐）：在根布局组件中包裹<BrowserRouter>以提供路由上下文

  // app/layout.tsx
  import { BrowserRouter } from 'react-router-dom';
  
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body>
          <BrowserRouter>{children}</BrowserRouter>
        </body>
      </html>
    );
  }
  

  注意：该方式会与Next.js原生路由冲突，优先推荐使用Next.js自带路由方案。

组件渲染示例 #

在page.tsx中直接导入并渲染三个组件（作为首页内容）：

// app/page.tsx
import Aspects from './Aspects';
import FreeForm from './FreeForm';
import Lesson from './Lesson';

export default function Home() {
  return (
    <div>
      <Aspects />
      <FreeForm />
      <Lesson />
    </div>
  );
}

若需将组件作为独立页面，在app目录下分别创建aspects/page.tsx、freeform/page.tsx、lesson/page.tsx，每个文件导出对应组件即可。

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