要保持底部导航栏下的单个页面的状态，可以使用一个状态管理库来管理页面的状态。下面是一个使用React和React Router的示例代码：

首先，安装React、React Router和一个状态管理库（如Redux）：

npm install react react-dom react-router-dom redux

然后，创建一个名为BottomNavPage.js的React组件，该组件表示底部导航栏下的单个页面。在这个示例中，我们使用Redux来管理页面的状态。

import React from 'react';
import { connect } from 'react-redux';

// 定义一个动作类型常量
const SET_PAGE_STATE = 'SET_PAGE_STATE';

// 定义一个操作创建函数，用于设置页面状态
const setPageState = (pageState) => ({
  type: SET_PAGE_STATE,
  payload: pageState
});

// 定义一个Redux reducer函数，用于处理设置页面状态的操作
const pageReducer = (state = {}, action) => {
  switch (action.type) {
    case SET_PAGE_STATE:
      return {
        ...state,
        ...action.payload
      };
    default:
      return state;
  }
};

// 创建一个Redux store，使用上面定义的reducer函数
const store = createStore(pageReducer);

// 创建一个React组件
class BottomNavPage extends React.Component {
  // 页面加载时，从Redux store中获取当前页面的状态
  componentDidMount() {
    const { setPageState } = this.props;
    setPageState(store.getState());
  }

  // 当页面状态更新时，将新的状态保存到Redux store中
  componentDidUpdate(prevProps) {
    const { pageState, setPageState } = this.props;
    if (pageState !== prevProps.pageState) {
      setPageState(pageState);
    }
  }

  render() {
    const { pageState } = this.props;
    // 渲染页面内容
    return (
      

        
底部导航栏下的页面
        
页面状态：{pageState}
        {/* 其他页面内容 */}
      
    );
  }
}

// 使用connect函数连接React组件和Redux store，将页面状态映射为组件的props
const mapStateToProps = (state) => ({
  pageState: state
});

// 使用connect函数连接React组件和Redux store，将操作创建函数映射为组件的props
const mapDispatchToProps = (dispatch) => ({
  setPageState: (pageState) => dispatch(setPageState(pageState))
});

// 使用connect函数连接React组件和Redux store
export default connect(mapStateToProps, mapDispatchToProps)(BottomNavPage);

最后，在应用的根组件中，使用React Router来定义路由，并在底部导航栏中显示BottomNavPage组件：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import BottomNavPage from './BottomNavPage';

class App extends React.Component {
  render() {
    return (
      
        

          

          
          
          
        
      
    );
  }
}

export default App;

在上面的代码中，HomePage是一个普通的React组件，BottomNavPage是我们创建的底部导航栏下的页面组件。注意，在Route组件中使用exact属性来确保只有在路径完全匹配时才渲染HomePage组件。

这样，当用户通过底部导航栏切换到不同的页面时，每个BottomNavPage组件都会从Redux store中获取当前页面的状态，并在页面状态更新时将新的状态保存到Redux store中，从而保持每个页面的状态。