在HTML页面中显示上一个页面的数据，通常涉及到的是前端开发中的路由和状态管理，这里我们以React为例，介绍如何在HTML页面中显示上一个页面的数据。
1、使用React Router
React Router是一个用于React应用的路由器，它可以让你的应用支持URL路由，通过React Router，我们可以在切换页面时保存当前页面的状态，然后在下一个页面中读取这个状态。
我们需要安装React Router：
npm install react-router-dom
我们可以在应用中使用BrowserRouter、Route和Switch组件来创建路由：
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Page1 from './Page1';
import Page2 from './Page2';
function App() {
return (
<Router>
<Switch>
<Route path="/page1">
<Page1 />
</Route>
<Route path="/page2">
<Page2 />
</Route>
</Switch>
</Router>
);
}
export default App;
在Page1和Page2组件中，我们可以使用useLocation钩子来获取当前页面的URL：
import React from 'react';
import { useLocation } from 'react-router-dom';
function Page1() {
const location = useLocation();
// ...
}
我们可以将数据作为URL参数传递，或者使用React的状态管理库（如Redux）来共享数据。
2、使用Redux
Redux是一个用于JavaScript应用的状态管理库，它可以帮助我们管理应用的状态，通过Redux，我们可以在切换页面时保存当前页面的状态，然后在下一个页面中读取这个状态。
我们需要安装Redux：
npm install redux react-redux redux-thunk
我们可以创建一个Redux store来存储应用的状态：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
在Page1和Page2组件中，我们可以使用connect函数来连接Redux store和组件：
import React from 'react';
import { connect } from 'react-redux';
import { getData } from './actions';
function Page1({ data, getData }) {
useEffect(() => {
getData();
}, [getData]);
// ...
}
const mapStateToProps = state => ({ data: state.data });
const mapDispatchToProps = { getData };
export default connect(mapStateToProps, mapDispatchToProps)(Page1);
在actions.js文件中，我们可以定义一个getData函数来获取数据：
export function getData() {
return dispatch => {
// 获取数据的逻辑...
dispatch({ type: 'GET_DATA', payload: data }); // 假设我们已经获取到了数据data，将其发送到Redux store中。
};
}
在reducers.js文件中，我们可以定义一个reducer来处理GET_DATA动作：
const initialState = { data: null }; // 初始状态为null或一个空对象。
export default function rootReducer(state = initialState, action) {
switch (action.type) {
case 'GET_DATA': // 如果接收到GET_DATA动作，更新state中的data。
return { ...state, data: action.payload }; // 将新数据设置为state中的data，返回一个新的state对象，default: return state; // 如果接收到其他动作，返回当前的state，默认情况下返回初始状态。}};} export default rootReducer;```
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/338739.html
微信扫一扫 