react-router#Link JavaScript Examples

renderBack(backToURL) {
    if (backToURL) {
      return (
        <Link to={backToURL}>
          <IconButton>
            <ArrowBackIcon
              style={{ fill: "white" }}
              color={theme.colors.white}
            />
          </IconButton>
        </Link>
      );
    }
    return <div />;
  }

onClick(event) {
    if (this.props.disabled) {
      event.preventDefault();
      return;
    }

    if (this.props.children.props.onClick) {
      this.props.children.props.onClick(event);
    }

    Link.prototype.handleClick.call(this, event);
  }

Repo = ({ repo, owner }) => {
  const { login } = owner;
  const { name, description } = repo;

  return (
    <div className="Repo">
      <h3>
        <Link to={`/${login}/${name}`}>{name}</Link>
        {" by "}
        <Link to={`/${login}`}>{login}</Link>
      </h3>
      {description && <p>{description}</p>}
    </div>
  );
}

User = ({ user }) => {
  const { login, avatarUrl, name } = user;

  return (
    <div className="User">
      <Link to={`/${login}`}>
        <img src={avatarUrl} alt={login} width="72" height="72" />
        <h3>
          {login} {name && <span>({name})</span>}
        </h3>
      </Link>
    </div>
  );
}

Main = React.createClass({
  render() {
    return (
      <div>
        <h1>
          <Link to="/">Reduxstagram</Link>
        </h1>
        {React.cloneElement(this.props.children, this.props)}
      </div>
    )
  }
})

Photo = React.createClass({
  render() {
    const { post, i, comments } = this.props;
    return (
      <figure className="grid-figure">
        <div className="grid-photo-wrap">
          <Link to={`/view/${post.code}`}>
            <img src={post.display_src} alt={post.caption} className="grid-photo" />
          </Link>

          <CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
            <span key={post.likes} className="likes-heart">{post.likes}</span>
          </CSSTransitionGroup>

        </div>

        <figcaption>
          <p>{post.caption}</p>
          <div className="control-buttons">
            <button onClick={this.props.increment.bind(null, i)} className="likes">&hearts; {post.likes}</button>
            <Link className="button" to={`/view/${post.code}`}>
              <span className="comment-count">
                <span className="speech-bubble"></span>
                {comments[post.code] ? comments[post.code].length : 0}
              </span>
            </Link>
          </div>
        </figcaption>

      </figure>
    )
  }
})

Main = React.createClass({
  render() {
    // Then we go ahead and return some JSX
    return (
      <div>
        <h1>
          <Link to="/">Reduxstagram</Link>
        </h1>
        {/* We use cloneElement here so we can auto pass down props */}
        {React.cloneElement(this.props.children, this.props)}
      </div>
    );
  },
})

renderList() {
    const items = Object.keys(components).map(key => {
      const group = components[key];
      const list = Object.keys(group).map(c => {
        const entry = group[c];

        return (
          <li key={'component-' + c}>
            <Link to={{ pathname: '/', query: { page: c, group: key } }}>{c}</Link>
          </li>
        );
      });

      return (
        <div key={'group-' + key} className="component-list-container">
          <p className="group-name">{key}</p>
          <ul className="component-list">
            {list}
          </ul>
        </div>
      );
    });

    return (
      <div className="component-list-wrapper">
        <p className="title">components</p>
        {items}
      </div>
    );
  }

renderPageDetail() {
    const { params, location } = this.props;
    const { query } = location;
    const { group, page } = query;

    return (
      <div className="component-wrapper">
        <p className="back"><Link to={{ pathname: '/' }}>Back to homepage</Link></p>
        <p className="title">{page}</p>
        {components[group] && components[group][page] ? React.createElement(components[group][page]) : null}
      </div>
    );
  }

Header = () => (
  <header className="header">
    <h1><img src="./images/logo.png" alt="React Stack Grid" /></h1>
    <nav>
      <ul>
        <li><IndexLink to="/" activeClassName="is-active">Home</IndexLink></li>
        <li><Link to="/horizontal/" activeClassName="is-active">Horizontal</Link></li>
        <li><Link to="/change-size/" activeClassName="is-active">Change Size</Link></li>
        <li><Link to="/real-world/" activeClassName="is-active">Real World</Link></li>
        <li><a href="https://github.com/tsuyoshiwada/react-stack-grid">GitHub</a></li>
      </ul>
    </nav>
  </header>
)

Photo = React.createClass({
  render() {
    const { post, i, comments } = this.props;
    return (
      <figure key={i} className="grid-figure">
        <div className="grid-photo-wrap">
          <Link to={`/view/${post.code}`}>
            <img
              className="grid-photo"
              src={post.display_src}
              alt={post.caption}
            />
          </Link>

          <CSSTransitionGroup
            transitionName="like"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
          >
            <span key={post.likes} className="likes-heart">
              {post.likes}
            </span>
          </CSSTransitionGroup>
        </div>

        <figcaption>
          <p>{post.caption}</p>

          <div className="control-buttons">
            <button
              onClick={this.props.increment.bind(null, i)}
              className="likes"
            >
              &hearts; {post.likes}
            </button>

            <Link to={`/view/${post.code}`} className="button">
              <span className="comment-count">
                <span className="speech-bubble"></span>{" "}
                {comments[post.code] ? comments[post.code].length : 0}
              </span>
            </Link>
          </div>
        </figcaption>
      </figure>
    );
  },
})