React路由的使用(小白)

1.项目结构

安装

npm install react-router-dom

2.代码

1.        App.js

import React, { Component } from "react";
import { Link, BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Page/Home/home";
import Data from "./Page/Data/data";
import "./App.css"; // 引入样式表文件

class App extends Component {
  render() {
    return (
        <Router>
          <div className="container"> {/* 添加一个类名，用于应用样式 */}
            <div className="header">
              <h2>React路由的使用</h2>
            </div>
            <div className="navbar">
              <ul>
                <li>
                  <Link to="/Page/Home">首页</Link>
                </li>
                <li>
                  <Link to="/Page/Data/*">数据页</Link>
                </li>
              </ul>
            </div>
            <div className="content">
              <Routes>
                <Route path="/Page/Home" element={<Home />} />
                <Route path="/Page/Data/*" element={<Data />} />
              </Routes>
            </div>
            <div className="footer">
              {/* 页脚内容 */}
            </div>
          </div>
        </Router>
    );
  }
}

export default App;

/* App.css */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}

.container {
  max-width: 960px;
  margin: 20px auto;
  padding: 0 20px;
}

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.navbar {
  background-color: #444;
  padding: 10px;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul li {
  display: inline;
  margin-right: 10px;
}

.navbar ul li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
}

.navbar ul li a:hover {
  background-color: #555;
}

.content {
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/*index.js*/

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "./App.css"; // 引入样式表文件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2.reportWebVitals.js

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

/*setupProxy.js*/

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api', {
            target: 'http://127.0.0.1:5000',
            changeOrigin: true,
            pathRewrite: {
                '/oldPath': '/newPath',
            },
        }))
}

/*setupTests.js*/

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

3.Test.js

import axios from 'axios';
import {useEffect, useState} from "react";
function Test(){
    // 用于存储接口响应
    const [data, setData] = useState({});

    useEffect(()=>{
        // 创建form-data
        const formData = new FormData();
        formData.append('start', 1);
        formData.append('end', 400);

        // 发送一个post请求
        axios.post('/path', formData)
            .then(response => {
                // 将返回的数据存入到data中
                setData(response.data);

                // 在控制台可以看到输出的data
                console.log(data);
            })
            .catch(error => {
                console.log(error);
            });
    }, []);

    return(
        111// 自定义展示data
    )
}

export default Test;

4.Message.js

import React, {Component} from 'react';
import './Message.css'; // 引入样式表文件

class Message extends Component {
    render() {
        return (
            <div className="message-container"> {/* 使用样式中定义的类名 */}
                <ul className="message-list"> {/* 使用样式中定义的类名 */}
                    <li>
                        消息一
                    </li>
                    <li>
                        消息二
                    </li>
                    <li>
                        消息三
                    </li>
                </ul>
            </div>
        );
    }
}

export default Message;

5.new.js

import React, { Component } from 'react';
import './News.css'; // 引入样式表文件

class News extends Component {
    render() {
        return (
            <div className="news-container"> {/* 使用样式中定义的类名 */}
                <ul className="news-list"> {/* 使用样式中定义的类名 */}
                    <li>
                        新闻一
                    </li>
                    <li>
                        新闻二
                    </li>
                    <li>
                        新闻三
                    </li>
                </ul>
            </div>
        );
    }
}

export default News;

6.data.js

import React, { Component } from 'react';
import { Link, Route, Routes } from "react-router-dom";
import News from "./News/news";
import NewsMessage from "./Message/Message";
import './Data.css'; // 引入样式表文件

class Data extends Component{
    render() {
        return (
            <div className="data-container"> {/* 使用样式中定义的类名 */}
                <h2>这是数据页的内容</h2>
                <ul className="data-menu"> {/* 使用样式中定义的类名 */}
                    <li>
                        <Link to="News">新闻</Link>
                    </li>
                    <li>
                        <Link to="NewsMessage">新闻内容</Link>
                    </li>
                </ul>
                <div className="data-content"> {/* 使用样式中定义的类名 */}
                    <Routes>
                        <Route path="News" element={<News/>}/>
                        <Route path="NewsMessage" element={<NewsMessage/>}/>
                    </Routes>
                </div>
            </div>
        );
    }
}

export default Data;

6.home.js

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                <h2>我是首页内容</h2>
            </div>
        );
    }
}

export default Home;