React（一）—— router/useRef/useState

---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

一、构建项目

1.1 使用vite构建项目

1. 创建react程序

npm create vite 

2. 进入到项目内部，安装npm

npm  install

3. 启动项目dev环境

npm run dev

1.2 所需插件

二、Router

2.1 安装router

• 安装node 18对应的Router

npm install react-router@6

安装成功后package.json会出现

  "dependencies": {"react": "^18.3.1","react-dom": "^18.3.1","react-router-dom": "^6.28.1"},

2.2 创建路由规则

• App.jsx里创建路由规则，实现功能：
  1. 输入栏里输入地址，跳转到指定的Page里
  2. 当输入有误时，跳转到NotFoundPage里

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import ContactPage from "./pages/ContactPage";
import NotFoundPage from "./pages/NotFoundPage";function App() {return (<div><BrowserRouter><Routes><Route path="/" element={<HomePage></HomePage>} /><Route path="/about" element={<AboutPage />} /><Route path="/contact" element={<ContactPage />} /><Route path="*" element={<NotFoundPage />} /></Routes></BrowserRouter></div>);
}export default App;

2.3 创建导航栏

• 创建导航栏，实现功能有：
  1. 点击页面里的导航栏，实现不跳转到其他页面
  2. 给点击过的导航栏，添加一个绿色的样式

2.3.1 添加样式文件

• 在src/assets/css/style.css添加导航栏点击后的样式

.active-item {color: green;
}.passive-item {color: red;
}

2.3.2 添加导航栏组件

• 添加导航栏组件，src/component/Menu.jsx

2.3.3 给每个页面添加Menu导航栏

• 给每个使用到Menu导航组件的页面里添加该组件

2.4 通过路由给页面传值

1. 在路由里添加参数名称

2. About页面接收路由传递的参数，并且将参数使用在页面里

import React from "react";
import Menu from "../component/Menu";
import { useParams } from "react-router-dom";export default AboutPage() {let { id, name } = useParams();return (<div><Menu /><h1>AboutPage</h1><p>