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>