当前位置：首页 > React

如何写react项目多个页面

2026-01-26 00:28:12React

创建多页面React项目的方法

使用React Router管理多页面是常见方案。React Router是React官方推荐的库，用于处理单页应用（SPA）中的路由和页面导航。

安装React Router

通过npm或yarn安装react-router-dom：

npm install react-router-dom
# 或
yarn add react-router-dom

配置基本路由结构

在项目入口文件（如App.js）中设置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

创建页面组件

在src目录下创建pages文件夹，存放各个页面组件：

如何写react项目多个页面

// pages/Home.js
function Home() {
  return <h1>Home Page</h1>;
}

// pages/About.js
function About() {
  return <h1>About Page</h1>;
}

// pages/Contact.js
function Contact() {
  return <h1>Contact Page</h1>;
}

添加导航链接

在需要导航的地方使用Link组件：

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

处理动态路由

对于需要参数的页面，使用动态路由：

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

在UserProfile组件中获取参数：

如何写react项目多个页面

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
}

配置404页面

添加通配符路由处理未匹配路径：

<Route path="*" element={<NotFound />} />

使用嵌套路由

对于有共享布局的页面组，使用嵌套路由：

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<DashboardSettings />} />
</Route>

代码分割优化

使用React.lazy和Suspense实现按需加载：

import { lazy, Suspense } from 'react';

const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}