html上一页下一页怎么做

在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;```