{"action":"opened","issue":{"url":"https://api.github.com/repos/zhangwilling/blog/issues/2","repository_url":"https://api.github.com/repos/zhangwilling/blog","labels_url":"https://api.github.com/repos/zhangwilling/blog/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/zhangwilling/blog/issues/2/comments","events_url":"https://api.github.com/repos/zhangwilling/blog/issues/2/events","html_url":"https://github.com/zhangwilling/blog/issues/2","id":294188342,"number":2,"title":"开发一个基于React Router4模块化的路由管理方案","user":{"login":"zhangwilling","id":20391734,"avatar_url":"https://avatars1.githubusercontent.com/u/20391734?v=4","gravatar_id":"","url":"https://api.github.com/users/zhangwilling","html_url":"https://github.com/zhangwilling","followers_url":"https://api.github.com/users/zhangwilling/followers","following_url":"https://api.github.com/users/zhangwilling/following{/other_user}","gists_url":"https://api.github.com/users/zhangwilling/gists{/gist_id}","starred_url":"https://api.github.com/users/zhangwilling/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhangwilling/subscriptions","organizations_url":"https://api.github.com/users/zhangwilling/orgs","repos_url":"https://api.github.com/users/zhangwilling/repos","events_url":"https://api.github.com/users/zhangwilling/events{/privacy}","received_events_url":"https://api.github.com/users/zhangwilling/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-02-04T10:56:16Z","updated_at":"2018-02-04T10:56:16Z","closed_at":null,"author_association":"OWNER","body":"另外一个任务要做，所以先放一个骨架。让我花点时间来回忆一下半年前的场景。\r\n\r\n明天、后天或者下周末有空再更新咯（苦逼的工作）...\r\n\r\n## 背景\r\n> 也算是承接上一篇了。半年前用react-router4时做了一个配置页面路由的方案，主要的特点是支持模块化，这个特性和我的项目结构有关。当时官方团队还没有针对react-router4的路由管理配置，所以就必须由自己开发了。当时我写着写着悟出了react-router4一切皆组件的哲学哈。\r\n\r\n注意这里说的是方案，一切的一切都是源于router4的组件特性。\r\n\r\n先放上核心代码吧，等我抽出时间慢慢道来~~\r\n\r\n```javascript\r\nimport React from 'react'\r\nimport { Route } from 'react-router-dom'\r\nimport _ from 'lodash'\r\n\r\nconst RouteWithSubRoutes = (route) => {\r\n  const { component: RouteComponent, path, exact, trunkProps } = route\r\n  return (\r\n    <Route path={path} exact={!!exact} render={props => (\r\n      <RouteComponent {...props} routes={route.routes} {...trunkProps} />\r\n    )} />\r\n  )\r\n}\r\n\r\nexport const generateRoute = (routeMap, trunkProps) => {\r\n  if (_.isArray(routeMap)) {\r\n    return routeMap.map((route, i) => {\r\n      return (\r\n        <RouteWithSubRoutes key={i} {...route} trunkProps={trunkProps} />\r\n      )\r\n    })\r\n  } else {\r\n    return <RouteWithSubRoutes {...routeMap} trunkProps={trunkProps} />\r\n  }\r\n}\r\n\r\n```\r\n\r\n子页面代码 \r\n\r\n```\r\nimport React from 'react'\r\nimport { generateRoute } from 'utils'\r\n\r\nclass RequirementIndex extends React.Component {\r\n  render () {\r\n    const ChildrenRoutes = generateRoute(this.props.routes)\r\n    return (\r\n      <div className='app-content' style={{paddingTop: 20}}>\r\n        {/* <div>面包屑...</div> */}\r\n        {ChildrenRoutes}\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport const view = RequirementIndex\r\n\r\n```\r\n\r\n子页面路由配置\r\n\r\n```\r\nimport { view as RepoLit } from './repo_list'\r\nimport { view as SingeleRepo } from './single_repo'\r\nimport { view as Root } from './root'\r\nimport { generateRoute } from 'utils'\r\n\r\nexport const routeMap = {\r\n  path: '/Home',\r\n  component: Root,\r\n  routes: [\r\n    {\r\n      path: '/home/repolist',\r\n      component: RepoLit,\r\n      exac: true\r\n    },\r\n    {\r\n      path: '/home/singleRepo/:projectId',\r\n      component: SingeleRepo\r\n    }\r\n  ]\r\n}\r\n\r\nexport const RouteComponent = generateRoute(routeMap)\r\n\r\n\r\n```\r\n\r\n整体结构，这里看起来冗长哈，不过是有原因的。\r\n```\r\nimport { RouteComponent as Login } from './login/routeMap'\r\nimport { RouteComponent as Home } from './home/routeMap'\r\nimport { RouteComponent as Package } from './package/routeMap'\r\nimport { RouteComponent as Project } from './project/routeMap'\r\nimport { RouteComponent as App } from './app/routeMap'\r\nimport { RouteComponent as Test } from './test/routeMap'\r\nimport { RouteComponent as Minions } from './minions/routeMap'\r\nimport { RouteComponent as Playground } from './playground/routeMap'\r\nimport { generateRoute } from 'utils'\r\n\r\nexport const routeMap = [{\r\n  path: '/login',\r\n  component: () => Login\r\n}, {\r\n  path: '/home',\r\n  component: () => Home\r\n}, {\r\n  path: '/package',\r\n  component: () => Package\r\n}, {\r\n  path: '/project',\r\n  component: () => Project\r\n}, {\r\n  path: '/app',\r\n  component: () => App\r\n}, {\r\n  path: '/minions',\r\n  component: () => Minions\r\n}, {\r\n  path: '/playground',\r\n  component: () => Playground\r\n},\r\n{\r\n  path: '/test',\r\n  component: () => Test\r\n}]\r\n\r\nexport const RootRouteComponent = generateRoute(routeMap)\r\n```\r\n\r\n\r\n\r\n\r\n## 场景分析\r\n\r\n## 模块化路由配置\r\n> 结合领域模型和业务边界思考\r\n\r\n### 页面级别的路由\r\n> 把页面当成组件\r\n\r\n### 组件级别的路由\r\n\r\n## 总结\r\n\r\n一切皆是路由的哲学符合react的组件哲学\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"zhangwilling"}}