配置路由的两种方式

方式一（标签化形式）

const store = configureStore()
const history = syncHistoryWithStore(hashHistory, store)

const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={Main} onEnter={processToken}>
        <IndexRoute component={ItemDefinitions}/>
        <Route  path='ItemDefinitions' component={ItemDefinitions}></Route>
        <Route  path='StockItem' component={StockItem}></Route>  
        <Route  path='StockTransaction' component={StockTransaction}></Route>  
        <Route  path='RequisitionedDetails' component={RequisitionedDetails}></Route>    
        <Route  path='validatedemo' component={ValidateDemo}></Route>
        <Route path='*' component={ItemDefinitions}></Route>
      </Route>
    </Router>
  </Provider>
)

export default router

这种方式比较常见，通过Provide传入 store 和 history，然后所有的路由配置在一个地方，便于代码查找和新增。

方式二（json配置文件形式）

// createRoutes.js

const createRoutes = store => ({
  path: '/index',
  getComponent(nextState, cb) {
    import('LAYOUTS/HomeLayout').then((HomeLayout) => {
      cb(null, HomeLayout.default);
    });
  },
  onChange(preState, nextState) {
    const { menuState } = store.getState();
    const { selected, opened } = menuState;
    const { pathname } = nextState.location;
    if (pathname !== selected) {
      store.dispatch(changeMenuSelected(pathname));
    }
    const nowOpened = getMenusOpened(pathname);
    if (nowOpened && nowOpened !== opened) {
      store.dispatch(changeMenuOpened(nowOpened));
    }
  },
  indexRoute: HomeRoute(store),
  childRoutes: [
    EInvoiceManage(store),
    EInvoiceHead(store),
    MakeInvoiceCompany(store),
    MakeInvoiceProject(store),
    MakeInvoiceSource(store),
    ConfigWarning(store),
    ConfigAuthority(store)
  ]
});
export default createRoutes;

同样是传入store 和 history，这种形式，路由对store和history的操作大多集中在各个组件逻辑里。