react如何添加新的页面

添加新页面的基本步骤

在React中创建新页面通常涉及路由配置和组件创建。以下是具体方法：

1. 安装React Router
   使用npm或yarn安装react-router-dom：

   npm install react-router-dom

2. 创建页面组件
   在src/pages目录下新建组件文件（例如About.js）：

   import React from 'react';
   function About() {
     return <div>About Page Content</div>;
   }
   export default About;

3. 配置路由
   在主应用文件（如App.js）中设置路由：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import About from './pages/About';
   
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     );
   }

动态路由实现

对于需要参数的页面（如用户详情页）：

1. 创建动态页面组件

   import { useParams } from 'react-router-dom';
   function UserDetail() {
     const { id } = useParams();
     return <div>User ID: {id}</div>;
   }

2. 配置动态路由

   <Route path="/users/:id" element={<UserDetail />} />

布局模板复用

若多个页面需要共享布局：

1. 创建布局组件

   function Layout({ children }) {
     return (
       <div>
         <header>Shared Header</header>
         <main>{children}</main>
       </div>
     );
   }

2. 嵌套路由配置

   <Route element={<Layout />}>
     <Route path="/page1" element={<Page1 />} />
     <Route path="/page2" element={<Page2 />} />
   </Route>

代码分割优化

对于大型应用，建议使用懒加载：

const About = lazy(() => import('./pages/About'));
<Suspense fallback={<div>Loading...</div>}>
  <Route path="/about" element={<About />} />
</Suspense>

注意事项

• 确保路由版本兼容性（v6与v5语法差异较大）
• 生产环境需配置服务器支持前端路由（如Nginx的try_files）
• 使用<Link to="/about">替代<a href>实现导航