ray-code-split v1.0.1

ray-code-split

use react-router@2

install

$ npm install --save ray-code-split

Usage

Basic (推荐)

import AsyncLoader from 'ray-code-split';

import Login from './Login';

const Home = () => <AsyncLoader load={import('./Home')} />;
const Page2 = props => <AsyncLoader load={import('./page2')} componentProps={props}/>;

const App = () => (
  <Router>
    <Route path="/" component={Home}>
      <Route path="/login" component={Login} />
      <Route path="/page2" component={Page2} />
    </Route>
  </Router>
)

// 或

const routes = [
  { path: 'home', component: Home },
  { path: 'login', component: Login },
  { path: 'page2', component: Page2 },
];

<Router history={hashHistory} routes={routes} />

use route

import useRouter from 'ray-code-split/lib/useRouter';

import Page1 from './page1';
import Page2 from './page2';
import Page3 from './page3';

const demoRoutes = [
  { path: 'page1', component: Page1 },
  { path: 'page2', component: Page2 },
  { path: 'page3', component: Page3 },
];

const asyncRouts = useRouter(demoRoutes);

export default {
  path: '/',
  // onEnter: onEnterValidate,
  indexRedirect: LoginRoot,
  indexRoute: {
    onEnter(nextState, replace) {
      replace('/login');
    }
  },
  childRoutes: asyncRouts
};

use hoc

import enhanceAsync from 'ray-code-split/lib/enhanceAsync';

import Login from './Login';

const Home = enhanceAsync(import('./Home'));
const Page2 = enhanceAsync(import('./page2'));

const App = () => (
  <Router>
    <Route path="/" component={Home}>
      <Route path="/login" component={Login} />
      <Route path="/page2" component={Page2} />
    </Route>
  </Router>
)

// 或

const routes = [
  { path: 'home', component: Home },
  { path: 'login', component: Login },
  { path: 'page2', component: Page2 },
];

<Router history={hashHistory} routes={routes} />

注意

采用 AsyncLoader 时，最好将所有的 props均注入到组件，即采用以下方式：

如果组件为router container组件，不能省略 componentProps，不传递 componentProps将无法传递 react-router children

const RootView = props => <AsyncLoader load={import('./RootView')} componentProps={props} />;

License

MIT