React
Getting Started with React Router

Creating Links

PRO

The login component is now wired up to appear when the user navigates to '/login'. Let's now use the react-router Link component to create some links to navigate back and forth between the two views. You shouldn't use plain-old HTML 'a' tags with react-router, you need to use the Link component.

Create a link to the login page in the Header component
'use strict';

import { Link } from 'react-router';
import React from 'react';

class Header extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-light">
        <div className="container">

          <Link to="/" className="navbar-brand">
            {this.props.appName.toLowerCase()}
          </Link>

          <ul className="nav navbar-nav pull-xs-right">
            <li className="nav-item">
              <Link to="/" className="nav-link">
                Home
              </Link>
            </li>

            <li className="nav-item">
              <Link to="login" className="nav-link">
                Sign in
              </Link>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default Header;

And now you can switch back and forth between the sign-in and home views.

Check your work

You can view the completed & working code from this tutorial here: