当前位置：首页 > React

react如何添加新的页面

2026-01-25 14:43:57React

添加新页面的基本步骤

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

安装React Router
使用npm或yarn安装react-router-dom：
```
npm install react-router-dom
```

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

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

配置路由
在主应用文件（如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>
  );
}

动态路由实现

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

react如何添加新的页面

创建动态页面组件

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

配置动态路由

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

布局模板复用

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

react如何添加新的页面

创建布局组件

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

嵌套路由配置

<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>