帮酷LOGO
  • 显示原文与译文双语对照的内容
Simple routing for your single page applications.

  • 源代码名称:offramp
  • 源代码网址:http://www.github.com/elefanty/offramp
  • offramp源代码文档
  • offramp源代码下载
  • Git URL:
    git://www.github.com/elefanty/offramp.git
  • Git Clone代码到本地:
    git clone http://www.github.com/elefanty/offramp
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/elefanty/offramp
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • offramp-logo

    Offramp是一个反应库,为你的单页应用程序提供简单的路由。

    特性

    • 具有应用程序状态的同步路由状态
    • UI中的分离状态
    • 路由支持钩子,如 beforeEnteronEnterbeforeExitonExit
    • 组件呈现前的异步呈现&数据提取

    快速启动

    要开始,yarn add offramp

    MobX
    importReactfrom'react';import { render } from'react-dom';import { RouterStore, Router, Route } from'offramp/mobx';import { Provider } from'mobx-react';// import your mobx stores and place them in stores object// create router property with a value of the routerStoreconstrouterStore=newRouterStore();conststores= {
     // your stores here.. router: routerStore
    };
    Redux
    importReactfrom'react';import { render } from'react-dom';import { routerReducer, Router, Route } from'offramp/redux';import { Provider } from'react-redux'// import your reducers and pass them in with the routerReducerconststores=createStore(combineReducers({
     //.. .reducers router: routerReducer
    });
    importReactfrom'react';import { render } from'react-dom';import { Router, Route } from'offramp';

    一旦导入了所有正确的依赖项,只需定义

    // import all your components for your routesimportMainfrom'./components/Main';importHomefrom'./components/Home';importAboutfrom'./components/About';importUsersPagefrom'./components/UsersPage';importNotFoundfrom'./components/NotFound';// if you're just using React, remove the Providerrender(
     <Provider store={stores}><Router><Route path='/' component={Main}><Route index component={Home} /><Route path='/about' component={About} /><Route path='/users' component={UsersPage} /></Route><Route path='*' component={NotFound} /></Router></Provider>,
     document.getElementById('root')
    );

    正在启动

    安装

    使用 npm插件:

    npm install offramp --save

    或者纱线:

    yarn add offramp

    使用 Offramp

    要开始,创建 index.js 文件并根据所使用的状态管理库导入所需的内容:

    importReactfrom'react';import { render } from'react-dom';import { routerStore, Router, Route } from'offramp/mobx'; // mobximport { routerReducer, Router, Route } from'offramp/redux'; // redux

    我们在整个应用程序中使用提供程序API来管理你的存储,因此我们需要导入它:

    import { Provider } from'mobx-react'; // mobximport { Provider } from'react-redux'; // redux

    使用MobX时,需要导入存储,并将它的放入单个存储对象中,如下所示。 允许Offramp在整个应用程序中使用你的路由器状态:

    conststores= {
     //.. .stores router: routerStore
    };

    如果使用 Redux Redux我们首先需要从库导入一些实用程序:

    import { createStore, combineReducers } from'redux';

    然后通过组合你的reducer并传入routerReducer来创建存储:

    conststores=createStore(combineReducers({
     //.. .reducers router: routerReducer
    });

    创建路由

    Offramp中的路由旨在提供一个熟悉的API,让你能够快速启动客户端导航。 要创建路由结构,只需定义你的顶级 <Router> 组件,将包装所有路由。 然后,为了构造你的路由,只需将它们嵌套在 <Router> 组件中,并提供正确组件的每个路由。

    // import your componentsimportContactfrom'./components/Contact';importAboutfrom'./components/About';render(
     <Provider store={stores}><Router><Route path='/' component={Main}><Route path='/about' component={About} /><Route path='/contact' component={NotFound} /></Router></Provider>,
     document.getElementById('root')
    );

    如果需要为应用程序支持嵌套路由,只需将路由置于它的直接父路径组件中即可。 如果这些子路由需要为 index 路由,只需在预期索引路由中提供 index 属性。

    // import your componentsimportMainfrom'./components/Main';importHomefrom'./components/Home';importAboutfrom'./components/About';importUsersPagefrom'./components/UsersPage';importNotFoundfrom'./components/NotFound';render(
     <Provider store={stores}><Router><Route path='/' component={Main}><Route index component={Home} /><Route path='/about' component={About} /><Route path='/users' component={UsersPage} /></Route><Route path='*' component={NotFound} /></Router></Provider>,
     document.getElementById('root')
    );

    路由器状态

    Offramp旨在提供一种在呈现组件时处理任何预期数据的简单方法。 只需在你希望参数中声明的路径路径中声明,Offramp将确保当前的URL参数和查询参数更新和可以用。

    ...<Route path='/users' component={Users}><Route path='/users/:id' component={User} /></Route>...

    异步路由

    在特定的URL路径上需要支持异步钩子,首先需要在单独的文件中创建钩子对象并导入或者直接在 index.js 文件中定义钩子。

    // index.js...constuserHooks= {
     beforeEnter() { ... },
     onEnter() { ... },
     beforeExit() { ... },
     onExit() { ... }
    }...

    定义钩子之后,就可以将它们传递到组件中作为路径组件的支柱。

    ...<Route path='/users' component={Users}><Route path='/users/:id' hooks={userHooks} component={User} /></Route>

    在呈现组件之前,Offramp将检查是否存在任何钩子。 如果存在 beforeEnter 钩子,交叉将执行该函数,并在该函数解析之前阻止呈现。 这意味着你不再需要在生命周期方法中提取数据,比如 componentWillMount

    内置组件

    Offramp提供了一个 <Link/> 组件来在不同的视图之间导航。 定义链接时,在指向正确URL路径和 tag 属性的组件上传递 to 属性,该属性包含链接显示文本。

    <nav><li><Link to='/' tag='Home'/></li><li><Link to='/about' tag='About'/></li><li><Link to='/users' tag='Users'/></li></nav>

    即将推出的功能

    • 支持声明性路由
    • Memoize路由以防止过多的递归调用



    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语