我希望借此机会你自己编写了代码，因为这样做真的有助于在头脑中理清思路。无论如何我说过我会写一个方案的。所以在这里：（注意：如果你的写法和我的写法里有很大不同，那还是改用我的写法吧，以便于可以继续遵循本教程。）首先，创建文件User.js，内容如下：
src/pages/User.js
import React from 'react';
import ajax from 'superagent';
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
events: []
};
}
componentWillMount() {
ajax.get(`https://api.github.com/users/${this.props.match.params.user}/events`)
.end((error, response) => {
if (!error && response) {
this.setState({ events: response.body });
} else {
console.log(`Error fetching user data.`, error);
}
}
);
}
render() {
return (<div>
<p>Content for {this.props.match.params.user} to go here.</p>
</div>);
}
}
export default User;
这只是我们Detail组件的缩减版本。为了更加简化，我已经将Ajax调用转移到componentWillMount()。因为我们只在这里请求数据，现在render里面还什么都没有，我们现在就写上。
在这之前我想先配置一下新页面的路由。你应该注意到我在上面的代码里用了this.props.match.params.user两次，那你就该很容易看懂App.js里路由怎么写：
src/pages/App.js
<Route path="/user/:user" component={ User } />
注意：你还得先在头部加上import User from './User';
在开始写User页面之前。我们最后一件事是在Detail组件中做User组件的跳转。首先添加这一行到Detail.js文件的开头。
src/pages/Detail.js
import { Link } from 'react-router-dom'；
你现在可以在三个地方添加<Link>组件：renderCommits()，renderForks()和renderPulls()。这是很小的变化，你可以参考一下我的写法：
renderCommits() {
return this.state.commits.map((commit, index) => {
const author = commit.author ? commit.author.login : 'Anonymous';
return (<p key={index}>
<Link to={ `/user/${author}` }>{author}</Link>:
<a href={commit.html_url}>{commit.commit.message}</a>.
</p>);
});
}
renderForks() {
return this.state.forks.map((fork, index) => {
const owner = fork.owner ? fork.owner.login : 'Anonymous';
return (<p key={index}>
<Link to={ `/user/${owner}` }>{owner}</Link>: forked to
<a href={fork.html_url}>{fork.html_url}</a> at {fork.created_at}.
</p>);
});
}
renderPulls() {
return this.state.pulls.map((pull, index) => {
const user = pull.user ? pull.user.login : 'Anonymous';
return (<p key={index}>
<Link to={ `/user/${user}` }>{user}</Link>:
<a href={pull.html_url}>{pull.body}</a>.
</p>);
});
}
我们现在有一条路由到我们的新页面，Detail页面有几个链接跳转到User组件，外加一个写了大概的User.js。然后试试接口，看看能不能得到用户数据，给你提供一些灵感。
https://api.github.com/users/rexxara/events
如果你想了解的更深入，你可以给User组件更多的render方法，就像我们在Detail组件里做的一样，这样你就能输出更多信息。但是作为示例，我会尽量保持简单。你可以自己多写点render进去。我将在页面中呈现事件类型（比如PushEvent），仓库名称和创建日期。
我从Detail.js中复制的代码基本上做了全部的工作，实际上剩下的就只有写render()方法，这样User组件就完成了。我决定把这个页面做成一个列表，你可以多搞点花样进去，下面是我的User组件render()方法：
src/pages/User.js
render() {
return <ul>
{this.state.events.map((event, index) => {
const eventType = event.type;
const repoName = event.repo.name;
const creationDate = event.created_at;
return (<li key={index}>
<strong>{repoName}</strong>: {eventType}
at {creationDate}.
</li>);
})}
</ul>;
}
与之前的写forks页面差不多，其实应该将{creationDate}和{eventType}放在一条线上，以避免丢失空格。
就这样了，你现在访问http://localhost:8080 ，选择一个repository，点一下你想看的commit forks 或者 pulls ，然后点击用户名来看看他们的历史纪录。完美。
