使用React18.x和Router v6构建静态页面教程

资源摘要信息:"本文将详细介绍如何利用React 18.x版本和React Router v6创建一个简单的静态页面。React是一个用于构建用户界面的JavaScript库，由Facebook开发和维护。React Router是React的一个官方路由库，允许你在React应用中进行页面的路由配置。本次项目我们将创建一个React项目，并通过React Router v6来创建多个页面，并配置路由跳转。 首先，确保你的开发环境中已经安装了Node.js和npm（Node.js的包管理器）。接下来，使用命令行工具创建一个新的React项目： 1. 打开命令行工具，输入以下命令来创建项目： ```bash npx create-react-app react-project --template typescript ``` 这里使用了TypeScript模板，因为TypeScript为JavaScript提供了静态类型检查，使得大型项目的开发和维护更加容易。接着进入项目目录： ```bash cd react-project ``` 2. 安装React Router v6： 在项目目录中，通过运行以下命令来安装React Router v6： ```bash npm install react-router-dom@6 ``` 3. 设置React Router v6： 安装完成后，可以开始配置路由了。打开`src/App.tsx`文件，并替换其内容如下： ```jsx import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import HomePage from './HomePage'; import AboutPage from './AboutPage'; import ContactPage from './ContactPage'; function App() { return ( <Router> <nav> <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/about">关于我们</Link> </li> <li> <Link to="/contact">联系方式</Link> </li> </ul> </nav> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/about" element={<AboutPage />} /> <Route path="/contact" element={<ContactPage />} /> </Routes> </Router> ); } export default App; ``` 在这里，我们创建了一个React Router的路由配置，定义了三个路由路径：“/”（首页），“/about”（关于我们页面），“/contact”（联系方式页面），并且为每个路由关联了一个组件。 4. 创建页面组件： 在`src`目录下创建三个文件：`HomePage.tsx`、`AboutPage.tsx`和`ContactPage.tsx`，分别为首页、关于我们页面和联系方式页面创建组件。 例如，`HomePage.tsx`的内容可能是这样的： ```jsx import React from 'react'; function HomePage() { return ( <div> <h1>欢迎来到首页</h1> </div> ); } export default HomePage; ``` 5. 启动React项目： 在命令行中运行以下命令来启动你的React项目： ```bash npm start ``` 这将会在默认的浏览器中打开你的React应用。 通过以上步骤，你已经使用React 18.x版本和React Router v6成功创建了一个简单的静态页面应用。你可以继续扩展你的应用，增加更多的页面和功能。"