小白学react之Next.js 14（一）不配置路由的玩法

       Next.js 14是目前最新版本，我们用就用最新的玩一下。

建一个示例之后，我在找配置，我应该在那建一个新的页面。找半天硬是没找着，答案是现在不需要配置。

       我们来看一下Next.js 14的项目结构：

很明显，在src/app文件夹下面，我们有一个主页，叫page.tsx。其他的页面，也叫page.tsx，只是放在src/app下面不同的文夹里面。Next.js 的 app 目录结构使得你可以通过文件系统来定义路由。每一个文件夹就代表一个路径，每个文件夹中的 page.tsx 文件就是对应的页面组件。我们可以看一下简化的page.tsx:

// src/app/page.tsx
import React from "react";
import { useRouter } from "next/navigation"; // 使用 next/navigation 里的 useRouter

const HomePage: React.FC = () => {
  const router = useRouter();

  return (
    <div>
      <h1>主页</h1>
      <button onClick={() => router.push('/test')}>测试</button>
    </div>
  );
};

export default HomePage;

这里使用了 useRouter 钩子，它来自于 next/navigation，这使得你能够在函数组件中进行导航操作。

当你访问项目的根路径 / 时，将会加载 src/app/page.tsx 并显示主页。当你点击按钮时，useRouter 的 push 方法会导航到 /test 路径，这会加载 src/app/test/page.tsx 中的内容并显示测试页面。
通过这种方式，Next.js 提供了一种简单且直观的路由管理方法。此外，这种基于文件系统的路由组织方式也让代码结构更加清晰和易于维护。