如何使用 React.js 创建多页网站？

---

构建网站需要你依赖于手工定制的模板。重复使用模板和调整元素是比较好的选择，因为它可以节省时间，这些时间在其他地方可能会更有用。

React 为开发人员提供了一种现代化的解决方案，可以在最短的时间内让他们的网络应用程序运行起来。让我们正视现实，只有单页面的网络应用程序是极为少见的。大多数网络应用程序需要两个或更多个页面才能为用户提供预期目的。

单页与多页网站

以下是对单页应用程序 (SPA) 和多页应用程序 (MPA) 之间的典型区分。

• SPA 通常通过加载单个 HTML 页面并在不需要刷新它的情况下动态更新其内容来工作。
• MPA 从技术上讲通过为每个路由加载新页面来工作。

鉴于它们的差异，SPA 更适合希望创建快速导航 Web 应用程序的任何人，而 MPA 则更适合希望获得更好的 SEO 美观性和管理大型网站的人员。

先决条件

你需要基本 React 环境来承担手头任务。这意味着你需要系统中的 Node.js 和你首选的代码编辑器（我将使用 Visual Studio Code）。

• 了解导航路径。

项目结构

让我们在主目录内创建一个单独的目录，为每个多页页面保留一个页面，这样可以保持整洁，并避免因创建新文件而产生的混乱。

方法

此部分提供了创建 MPA Web 应用程序的标准指南。本例中，我们将创建一个包含有 主页、产品、服务 和 关于 页面在内的四页网站。

步骤 1：创建 React 应用

通过在终端中使用 create-react-app 命令创建 React 应用来开始着手吧。粘贴以下 React 命令将在你的代码编辑器中初始化一个新的 React 项目。

npx create-react-app my-website

cd my-website

步骤 2：安装 React Router

由于路由功能依赖于 react-router-dom 软件包，因此你必须安装此软件包。这个过程非常简单，只需将以下 React Router 安装命令粘贴到你的终端即可。

npm install react-router-dom

步骤 3：创建页面

本部分的目标是为主页、产品、服务和关于页面创建各个组件。作为标准 housekeeping 措施，在 src/ 目录内创建一个名为 components/ 的新文件夹。在该新文件夹内，创建四个文件 Home.js、Products.js、Services.js 和 About.js。

Homes.js：将以下代码粘贴到 Home.js 文件中。

// Home.js
import React from 'react';

const Home = () => {
  return (
    <div className="page">
      <h1>Home</h1>
      <p>Welcome to our new Tutorialspoint web page.</p>
    </div>
  );
};

export default Home;

Products.js：将以下代码粘贴到 Products.js 文件中。

// Products.js
import React from 'react';

const Products = () => {
  return (
    <div className="page">
      <h1>Products</h1>
      <p>Here is the new Tutorialspoint products catalog.</p>
    </div>
  );
};

export default Products;

Servoices.js：将以下代码粘贴到 Servoices.js 文件中。

// Services.js
import React from 'react';

const Services = () => {
  return (
    <div className="page">
      <h1>Services</h1>
      <p>Explore the various services offered by Tutorialspoint.</p>
    </div>
  );
};

export default Services;

About.js：将以下代码粘贴到 About.js 文件中。

// About.js
import React from 'react';

const About = () => {
  return (
    <div className="page">
      <h1>About</h1>
      <p>Connect with Tutorialspoint on this web page.</p>
    </div>
  );
};

export default About;

步骤 4：使用 React Router 设置路由

此步骤的任务包括编辑 App.js 文件夹，方法是导入 react-router-dom 和我们创建的四页。

App.js：找到 App.js 文件夹，并在其中粘贴以下代码。

// Enable the react-router-dom functinality
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import Home from './components/Home';
import Products from './components/Products';
import Services from './components/Services';
import About from './components/About';

// Imort the styling from App.css
import './App.css';

function App() {
  return (
    <Router>
      <div>
        <nav className="navbar">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/products">Products</Link></li>
            <li><Link to="/services">Services</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
          <Route path="/services" element={<Services />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

步骤 7：添加基本样式

添加基本 CSS 样式以提升用户对你项目的体验。找到 App.css 文件夹，并在其中包含以下样式。

App.css：找到 App.css 文件夹，并在其中粘贴以下代码。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: #333;
  padding: 1em;
}

.navbar ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.navbar ul li {
  display: inline;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.3s;
}

.navbar ul li a:hover {
  background-color: #575757;
  border-radius: 4px;
}

.page {
  padding: 20px;
  text-align: center;
}

.page h1 {
  color: #333;
}

.page p {
  font-size: 1.2em;
  color: #666;
}

输出

在终端上启动 React 开发服务器 npm start。