8/30/16

Using React Router

Like in angular react has its own router module. For demonstration usage of routes in our application, lets create route repo there user can see the details of one of repos which displayed in search results.
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

No comments:

Post a Comment

Getting started with docker

It is very simple to get started usig docker. All you need to do-is download the docker desktop for your system Once you get docker syste...