React项目如何添加页面？是否需要在app.js中配置？

两种写法都能跑，但适用场景差很多：写几行代码的测试demo可以直接写在App.js里，只要是正经做项目、页面数量超过2个，一定要拆独立文件，不然后期维护能把人折磨死。我刚入门的时候图省事把3个带表单交互的页面全堆在App.js里，后来改个按钮样式翻了几百行代码，踩过坑就知道拆文件有多省事。

写法1：直接在App.js内编写页面（仅适合极简测试场景） #

不需要新建任何文件，直接在App.js里定义页面组件，用状态控制显示哪个页面就行，示例代码：

// App.js
import { useState } from 'react'

// 直接在App.js里写页面组件
function Home() {
  return <div><h1>首页</h1><p>这是直接写在App.js里的首页内容</p></div>
}

function About() {
  return <div><h1>关于页</h1><p>这是直接写在App.js里的关于页内容</p></div>
}

function App() {
  // 用状态记录当前要显示的页面
  const [currentPage, setCurrentPage] = useState('home')

  return (
    <div>
      {/* 简单导航 */}
      <nav style={{margin: '20px 0'}}>
        <button onClick={() => setCurrentPage('home')}>打开首页</button>
        <button onClick={() => setCurrentPage('about')} style={{marginLeft: '10px'}}>打开关于页</button>
      </nav>
      {/* 匹配状态渲染对应页面 */}
      {currentPage === 'home' && <Home />}
      {currentPage === 'about' && <About />}
    </div>
  )
}

export default App

这种写法上限极低，只要页面加个表单、列表之类的复杂逻辑，App.js的代码量会瞬间膨胀，改bug找代码都要翻半天，只适合刚接触JSX的时候写点小测试用。

写法2：拆分独立页面文件（正式项目通用标准写法） #

实际开发全用这种方式，所有页面单独存文件，统一管理，需要用的时候再导入，步骤非常简单：

1. 先在src目录下新建一个叫pages的文件夹，专门用来放所有页面组件
2. 每个页面对应一个单独的.jsx文件，比如首页建Home.jsx，关于页建About.jsx，最终的文件结构大概是这样：

你的项目根目录/
└── src/
    ├── pages/
    │   ├── Home.jsx
    │   └── About.jsx
    └── App.js

3. 每个文件里单独写对应页面的逻辑，比如Home.jsx的代码：

// src/pages/Home.jsx
export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <p>这是拆分到独立文件的首页，后续加轮播、文章列表之类的功能，直接在这个文件里写就行</p>
    </div>
  )
}

About.jsx的代码：

// src/pages/About.jsx
export default function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是拆分到独立文件的关于页，后续加联系方式、团队介绍都在这个文件改</p>
    </div>
  )
}

4. 最后回到App.js，把写好的页面组件导入进来，和之前一样用状态控制渲染就可以：

// App.js
import { useState } from 'react'
// 导入独立的页面组件
import Home from './pages/Home'
import About from './pages/About'

function App() {
  const [currentPage, setCurrentPage] = useState('home')

  return (
    <div>
      <nav style={{margin: '20px 0'}}>
        <button onClick={() => setCurrentPage('home')}>打开首页</button>
        <button onClick={() => setCurrentPage('about')} style={{marginLeft: '10px'}}>打开关于页</button>
      </nav>
      {currentPage === 'home' && <Home />}
      {currentPage === 'about' && <About />}
    </div>
  )
}

export default App

等你把React基础练熟之后，要做正规的多页路由跳转，直接用react-router-dom就行，不用自己写状态切页面，它的核心逻辑也是基于这种拆分独立页面的方式实现的，现在先把拆分文件的习惯养好，后面学路由会非常顺。

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