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;