这几天因为赶时间 , 所以理解上可能有许多的误差 , 如果你不幸点进来了 , 请不要看我的代码 , 这几天我会重新修改 , 然后把错误的不足的 全部修正一下 .

 1 import React from ‘react‘; 2 import ReactDOM from ‘react-dom‘;       //  Choose a file from the path  3 import Detail from ‘./pages/Detail‘;        //Automatic search path  4 import { Router, Route, IndexRoute } from ‘react-router‘; 5 import createHistory from ‘history/lib/createHashHistory‘; 6 import List from ‘./pages/List‘; 7  8 ReactDOM.render( 9         <Router history={createHistory({ queryKey: false })} 10             onUpdate={() => window.scrollTo(0, 0)}>11             <Route path="/" component={ List } />                   12             <Route path="/detail/:repo" component={ Detail } />    13         </Router>,14     document.getElementById(‘app‘)15 );16 17 // 9  /* 创建历史记录 . 访问网页的记录 */18 //11   /* 如果域名下面的是 / 的话就调用 list这个文件 开始渲染页面 */19 //13   /*    如果域名下面直接是detail的话就讲detail后面的东西传给 repo 并且打开detail文件将 repo 作为参数穿进去    */

 1 import React from ‘react‘; 2 import { Link } from ‘react-router‘; 3  4 class List extends React.Component { 5         render() { 6         return ( 7             <div> 8                 <p>Please choose a repository from the list below.</p> 9                 <ul>10                     <li><Link to="/detail/react">React</Link></li>11                     <li><Link to="/detail/react-native">React Native</Link></li>12                     <li><Link to="/detail/jest">Jest</Link></li>13                 </ul>14             </div>15         );16     }17 }18 export default List;19 20 // 根据 index 文件来看 , 打开链接之后 首先进入的就是  List 渲染的页面 . 21 22 // 这一部分的内容就时分的简单了 . 自己 不会的话 , 赶紧 请教一下别人 . 

import React from ‘react‘;import ajax from ‘superagent‘;class Detail extends React.Component {    constructor(props) {                            super(props);     this.state = {            name: [],            mode: ‘test1‘,            test1: [],            test2: [],            test3: []        };    }            fetchFeed(type) {            const baseURL = ‘http://192.168.1.100:3000‘;            ajax.get(`${baseURL}/${this.props.params.repo}/${type}`)            //ajax.get(`http://192.168.1.100:3000/${type}`)                .end((error, response) => {                    console.dir(response.body[0].url)                    if (!error && response) {                        this.setState({ [type]: response.body });                    } else {                        console.log(`Error fetching ${type}`, error);                    }                }            );        }    componentWillMount() {         var self = this;                 self.fetchFeed(‘test1‘);        self.fetchFeed(‘test2‘);        self.fetchFeed(‘test3‘);    }    showcommits() {        this.setState({ mode: ‘test1‘ });    }    showforks() {        this.setState({ mode: ‘test2‘ });    }    showpulls() {        this.setState({ mode: ‘test3‘ });    }    findName(){            }    rendercommits() {        return this.state.test1.map((commit, index) => {            const author = commit.author||commit.owner ? commit.author : ‘Anonymous‘;            return (<p key={index}>                <strong>{author}</strong>:                    <a href=http://www.mamicode.com/{commit.url}>{commit.url}."color: #000000;">        });    }    renderforks() {        return this.state.test2.map((fork, index) => {            const owner = fork.author ? fork.author : ‘Anonymous‘;            return (<p key={index}>                <strong>{owner}</strong>:                <a href=http://www.mamicode.com/{fork.url}>{fork.url}"color: #000000;">        });    }    renderpulls() {        return this.state.test3.map((pull, index) => {            const user = pull.author ? pull.author : ‘Anonymous‘;            return (<p key={index}>                <strong>{user}</strong>:                <a href=http://www.mamicode.com/{pull.url}>{pull.url}."color: #000000;">        });    }    render() {        let content;        if (this.state.mode === ‘test1‘) {            content = this.rendercommits();        } else if (this.state.mode === ‘test2‘) {            content = this.renderforks();        } else {            content = this.renderpulls();        }    return (<div>        <button onClick={this.showcommits.bind(this)}>Show Commits</button>        <button onClick={this.showforks.bind(this)}>Show Forks</button>        <button onClick={this.showpulls.bind(this)}>Show Pulls</button>        {content}        </div>);    }}export default Detail;// 3  在 index 文件中的 repo 作为 属性传到了这里的构造函数 props// 16 this.props.params.repo  调用this下的 , props 属性 , 下的 repo (  具体是什么我百度了一下 , 但是看的不懂 , 明天问一下老师 .   )//  自己分析 15 16 行 很简单 , 17行的error指的是 ajax.get 下载网页是否成功的状态( 我估计应该是储存的网页状态码 例如 200(正常) , 404( 服务器无法提供信息 ) 503 ( 服务器拒绝提供服务 , 爬虫常见 ) ) , response 用于储存 , 下载成功之后 的内容