Question

Rax 使用 rax-use-router 来管理多个页面，也就是说生成 Rax App 工程是一个单页应用（SPA - Single Page Application），相比多页应用它具有更好的页面切换体验和更一致的状态管理模式。

在 Rax 工程中你只需要以下简单的配置就可以管理页面路由，无需直接调用底层 API。

页面路由配置

根据 src/app.json 中的 routes 配置生成对应的路由规则。例如：

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    },
    {
      "path": "/about",
      "source": "pages/About/index"
    }
  ],
}

其中 path 为页面 url 匹配的路径， source 为对应组件在工程中的位置。

可以使用 (.*) 通配路由，这样做的好处是可以定义一个自定义的 404 页面。

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    },
    {
      "path": "(.*)",
      "source": "pages/NotFound/index"
    }
  ],
}

路由 API

可以使用 history 提供的 API 进行页面之间的跳转。

页面组件会自动注入 history ：

// src/pages/Home/index.jsx
import { createElement } from 'rax';
import Text from 'rax-text';

export default function Home(props) {
  const { history } = props;
  return <Text onClick={() => history.push('/about')}>Go to page about.</Text>
}

withRouter

withRouter 可以将 history、location 传入非页面组件的 props 对象上。

// src/component/Footer
import { createElement } from 'rax';
import Text from 'rax-text';
import { withRouter } from 'rax-app';

function Footer(props) {
  const { loaction, history} = props;
  // Get location state from `loaction`, perform history action by `history`
  return <Text onClick={() => history.push('/')}>go home</Text>;
}
export default withRouter(Footer);

更多 API 请见 history API 。

接下来，你可以开始开发 Rax 项目或了解 小程序、Weex 以及 Web 应用 ，快速构建多端应用。