Instead of simple li elements the search results will display links to repo route.
The main application will also have its own route - the default "/".
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={SearchPage}></Route>
<Route path="repo/:owner/:repo" component={Repo} />
</Router>,
document.getElementById('example')
);
Repo route will have its own component - Repo comonent, there will be displayed details of selected repo
var Repo = withRouter(
React.createClass({
render: function() {
return (
<ul>
<li><strong>owner</strong>:{this.props.params.owner}</li>
<li><strong>repo</strong>:{this.props.params.repo}</li>
<a href="#/">back</a>
</ul>
);
}
})
);
Now the only thing left is modify the SearchResults components so it ill display links to repos:
// Results List
var ResultsList = React.createClass({
render: function() {
var createItem = function(repo, idx) {
return <li key={idx}><Link to={`/repo/${repo.owner.login}/${repo.name}`}>{repo.name}</Link></li>;
};
var list;
if(this.props.results && this.props.results.length && !this.props.loading) {
list = this.props.results.map(createItem);
}
return <ul className="results">{list}</ul>;
}
});
See the code on plnkr