MobX 页面跳转实现方法 - 使用状态管理实现页面切换 - 常规

在 MobX 中，页面跳转通常是通过改变状态来实现的。下面是一种常见的做法：

首先，你需要定义一个状态来表示当前的页面。可以使用 'observable' 函数来创建一个可观察的状态变量。例如：

import { observable } from 'mobx';

const appState = observable({
  currentPage: 'home',
});

在你的页面组件中，你可以使用 '@observer' 装饰器将组件转换为可观察的组件。这样，当页面状态发生变化时，组件会自动重新渲染。例如：

import { observer } from 'mobx-react';

@observer
class HomePage extends React.Component {
  render() {
    return (
      <div>
        {/* 页面内容 */}
      </div>
    );
  }
}

在你的页面组件中，你可以通过访问 'appState.currentPage' 属性来获取当前页面的值，并根据需要进行条件渲染。例如：

import { observer } from 'mobx-react';

@observer
class HomePage extends React.Component {
  render() {
    if (appState.currentPage === 'home') {
      return (
        <div>
          {/* Home 页面内容 */}
        </div>
      );
    } else if (appState.currentPage === 'about') {
      return (
        <div>
          {/* About 页面内容 */}
        </div>
      );
    }
  }
}

在你的页面组件中，你可以定义一些触发页面跳转的方法，例如点击按钮时触发的事件处理函数。在这些方法中，你可以改变 'appState.currentPage' 的值来实现页面跳转。例如：

import { observer } from 'mobx-react';

@observer
class HomePage extends React.Component {
  handleButtonClick = () => {
    appState.currentPage = 'about';
  };

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>跳转到 About 页面</button>
      </div>
    );
  }
}

通过这种方式，你可以使用 MobX 来管理页面跳转逻辑，并且在页面状态发生变化时自动重新渲染组件。