react路由深度解析

先看一段代码能否秒懂很重要

这是app.js  全局js的入口

 import React from 'react'
 import { render } from 'react-dom'
 import { Router, browserHistory } from 'react-router'

 import withExampleBasename from '../withExampleBasename'
 import './stubs/COURSES'

 const rootRoute = {
   childRoutes: [ {   //子路由
     path: '/',
     component: require('./components/App'),
     childRoutes: [
       require('./routes/Calendar'),  //当前目录下有这么几个子路由
       require('./routes/Course'),
       require('./routes/Grades'),
       require('./routes/Messages'),
       require('./routes/Profile')
     ]
   } ]
 }

 render((
   <Router
     history={withExampleBasename(browserHistory, __dirname)}
     routes={rootRoute}
   />
 ), document.getElementById('example'))

以上面的calendar为例子  calendar下面有component 和index.js    同样其他如course  grades等下面也一样

index.js

 module.exports = {
   path: 'calendar',
   getComponent(nextState, cb) {
     require.ensure([], (require) => {
       cb(null, require('./components/Calendar'))
     })
   }
 }

component下面有calendar.js

 import React, { Component } from 'react'

 class Calendar extends Component {
   render() {
     const events = [
       { id: 0, title: 'essay due' }
     ]

     return (
       <div>
         <h2>Calendar</h2>
         <ul>
           {events.map(event => (
             <li key={event.id}>{event.title}</li>
           ))}
         </ul>
       </div>
     )
   }
 }

 module.exports = Calendar

怎么样找到诀窍了吗   /routes/calendar/index.js +component/calendar.js    /routes/grades/index.js +component/grades.js

找到规律了吧 ！！

来一个稍微复杂的路由

(这是全局的变量入口) COURSE.JS

 global.COURSES = [
   {
     id: 0,
     name: 'React Fundamentals',
     grade: 'B',
     announcements: [
       {
         id: 0,
         title: 'No class tomorrow',
         body: 'There is no class tomorrow, please do not show up'
       }
     ],
     assignments: [
       {
         id: 0,
         title: 'Build a router',
         body: 'It will be easy, seriously, like 2 hours, 100 lines of code, no biggie',
         grade: 'N/A'
       }
     ]

   },

   {
     id: 1,
     name: 'Reusable React Components',
     grade: 'A-',
     announcements: [
       {
         id: 0,
         title: 'Final exam next wednesday',
         body: 'You had better prepare'
       }
     ],
     assignments: [
       {
         id: 0,
         title: 'PropTypes',
         body: 'They aren\'t for you.',
         grade: '80%'
       },
       {
         id: 1,
         title: 'Iterating and Cloning Children',
         body: 'You can totally do it.',
         grade: '95%'
       }
     ]
   }
 ]

Course路由下面有子路由 他的目录结构 /routes/course/index.js +component(course.js+nav.js+dashborad.js)+ routers/(assignments + announcement +grade.js)

瞬间有点凌乱  有木有  往下看就明白了

course.js

 /*globals COURSES:true */
 import React, { Component } from 'react'
 import Dashboard from './Dashboard'
 import Nav from './Nav'

 const styles = {}

 styles.sidebar = {
   float: 'left',
   width: 200,
   padding: 20,
   borderRight: '1px solid #aaa',
   marginRight: 20
 }

 class Course extends Component {
   render() {
     let { sidebar, main, children, params } = this.props
     let course = COURSES[params.courseId]   //这是啥？ 根据前面导航条转过来的

     let content
     if (sidebar && main) {  //根据条件 初始化组件内容
       content = (
         <div>
           <div className="Sidebar" style={styles.sidebar}>
             {sidebar}
           </div>
           <div className="Main" style={{ padding: 20 }}>
             {main}
           </div>
         </div>
       )
     } else if (children) {
       content = children
     } else {
       content = <Dashboard />   //走的是这一步
     }

     return (
       <div>
         <h2>{course.name}</h2>
         <Nav course={course} />  //吸进来的一个组件  确定是去哪里  announcement  assignment  grades
         {content}
       </div>
     )
   }
 }

 module.exports = Course

貌似还有点迷糊  继续往下看吧

nav.js

 import React, { Component } from 'react'
 import { Link } from 'react-router'

 const styles = {}

 styles.nav = {
   borderBottom: '1px solid #aaa'
 }

 styles.link = {
   display: 'inline-block',
   padding: 10,
   textDecoration: 'none'
 }

 styles.activeLink = {
   ...styles.link,
   color: 'red'
 }

 class Nav extends Component {
   render() {
     const { course } = this.props
     const pages = [
       [ 'announcements', 'Announcements' ],
       [ 'assignments', 'Assignments' ],
       [ 'grades', 'Grades' ]
     ]

     return (
       <nav style={styles.nav}>
         {pages.map((page, index) => (
           <Link
             key={page[0]}
             activeStyle={index === 0 ? { ...styles.activeLink, paddingLeft: 0 } : styles.activeLink}
             style={index === 0 ? { ...styles.link, paddingLeft: 0 } : styles.link}
             to={`/course/${course.id}/${page[0]}`}   //这里是3个导航的跳转   /course/${course.id}/announcement   去往announcements assignments grades
           >{page[1]}</Link>
         ))}
       </nav>
     )
   }
 }

 export default Nav

来看一下router/announcement(index.js + component + router)    

index.js 文件

 module.exports = {
   path: 'announcements',

   getChildRoutes(partialNextState, cb) {
     require.ensure([], (require) => {
       cb(null, [
         require('./routes/Announcement')  //这又是一个子路由
       ])
     })
   },

   getComponents(nextState, cb) {
     require.ensure([], (require) => {
       cb(null, {
         sidebar: require('./components/Sidebar'),
         main: require('./components/Announcements')  //依赖的组件
       })
     })
   }
 }   

看到这里是否有点明白了  就像洋葱一层一层拨动我的心。。。还没完呢

component/announcement.js

 import React, { Component } from 'react'

 class Announcements extends Component {
   render() {
     return (
       <div>
         <h3>Announcements</h3>
         {this.props.children || <p>Choose an announcement from the sidebar.</p>}  //这个props在哪里找呀
       </div>
     )
   }
 }

 module.exports = Announcements

component/sidebar.js

 import React, { Component } from 'react'
 import { Link } from 'react-router'

 class AnnouncementsSidebar extends Component {
   render() {
     let { announcements } = COURSES[this.props.params.courseId]   //注意这种es6的语法  取得是里面announcements的直

     return (
       <div>
         <h3>Sidebar Assignments</h3>
         <ul>
           {announcements.map(announcement => (
             <li key={announcement.id}>
               <Link to={`/course/${this.props.params.courseId}/announcements/${announcement.id}`}>
                 {announcement.title}   //这个到了最后了
               </Link>
             </li>
           ))}
         </ul>
       </div>
     )
   }
 }

 module.exports = AnnouncementsSidebar

还没完呢  还有个  router-anouncement /index.js + announcement.js 的路由

看index.js 里面的内容

 module.exports = {
   path: ':announcementId',   //终于真相大白了  ！！

   getComponent(nextState, cb) {
     require.ensure([], (require) => {
       cb(null, require('./components/Announcement'))
     })
   }
 }

在看最里面的组件announcement.js

 import React, { Component } from 'react'

 class Announcement extends Component {
   render() {
     let { courseId, announcementId } = this.props.params   //这个很关键  怎么着呢  说白了就是 地址的参数 ${courseId}  ${announceId}
     let { title, body } = COURSES[courseId].announcements[announcementId]

     return (
       <div>
         <h4>{title}</h4>
         <p>{body}</p>
       </div>
     )
   }
 }

 module.exports = Announcement

我们大概可以看出来  这个路由到底是如何运作了   还有些细节问题我们继续看

整理一下思路 再出发

1. 第一个app.js   确定根目录  /

2. /calendar   /course   /message   /profile   这都是二级目录   下面都有一个  index.js   指定当前的路径  如course/index.js    指定path:course;

3./course/${courseiD}/announcement/${announcementId}    /course/${courseiD}/assignment/${assignmentId}  这是 深层次的

4./course/calendar  course/grades   这是浅层次的

最后是关键的全局组件

app.js

 import React, { Component } from 'react'
 import Dashboard from './Dashboard'
 import GlobalNav from './GlobalNav'

 class App extends Component {
   render() {
     return (
       <div>
         <GlobalNav />
         <div style={{ padding: 20 }}>
           {this.props.children || <Dashboard courses={COURSES} />}  //如果该属性没有children   就render dashboard
         </div>
       </div>
     )
   }
 }

 module.exports = App

dashboard.js

 import React, { Component } from 'react'
 import { Link } from 'react-router'

 class Dashboard extends Component {
   render() {
     const { courses } = this.props

     return (
       <div>
         <h2>Super Scalable Apps</h2>
         <p>
           Open the network tab as you navigate. Notice that only the amount of
           your app that is required is actually downloaded as you navigate
           around. Even the route configuration objects are loaded on the fly.
           This way, a new route added deep in your app will not affect the
           initial bundle of your application.
         </p>
         <h2>Courses</h2>{' '}
         <ul>
           {courses.map(course => (
             <li key={course.id}>
               <Link to={`/course/${course.id}`}>{course.name}</Link>   //这里会根据当前id去不同的course页面
             </li>
           ))}
         </ul>
       </div>
     )
   }
 }

 export default Dashboard

globalNav.js  全局导航

 import React, { Component } from 'react'
 import { Link } from 'react-router'

 const dark = 'hsl(200, 20%, 20%)'
 const light = '#fff'
 const styles = {}

 styles.wrapper = {
   padding: '10px 20px',
   overflow: 'hidden',
   background: dark,
   color: light
 }

 styles.link = {
   padding: 11,
   color: light,
   fontWeight: 200
 }

 styles.activeLink = {
   ...styles.link,
   background: light,
   color: dark
 }

 class GlobalNav extends Component {

   constructor(props, context) {
     super(props, context)
     this.logOut = this.logOut.bind(this)
   }

   logOut() {
     alert('log out')
   }

   render() {
     const { user } = this.props

     return (
       <div style={styles.wrapper}>
         <div style={{ float: 'left' }}>
           <Link to="/" style={styles.link}>Home</Link>{' '}   // 回到根目录
           <Link to="/calendar" style={styles.link} activeStyle={styles.activeLink}>Calendar</Link>{' '}
           <Link to="/grades" style={styles.link} activeStyle={styles.activeLink}>Grades</Link>{' '}
           <Link to="/messages" style={styles.link} activeStyle={styles.activeLink}>Messages</Link>{' '}
         </div>
         <div style={{ float: 'right' }}>
           <Link style={styles.link} to="/profile">{user.name}</Link> <button onClick={this.logOut}>log out</button>
         </div>
       </div>
     )
   }
 }

 GlobalNav.defaultProp= {
   user: {
     id: 1,
     name: 'Ryan Florence'
   }
 }

 export default GlobalNav

好吧  现在头绪出来了吧    我反正有点眉目了

1.首先是index.html    有个globalnav    /    /calendar   /grades   /message   /profile   分别去向  主页  日历页   年级页   信息页   详情页

2.如果 找不到props.children  就会渲染course   也会根据当前的courseid去往相应页

好吧 今天就这么多   让我好好捋捋。。。