Creating Links

Outline

The login component is now wired up to appear when the user navigates to the path /login. Let's now use the react-router Link component to create links to navigate between the two views. Anchor tags are not used with react-router, only the Link component. This is because we are actually changing the components that the user views, not actually navigating to a file (no request response cycle).

Create a link to the login page in the Header component


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

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

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

+         <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;

Check your work

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

Go Pro to unlock all content & remove ads

Outline

Outline

Check your work

I finished! On to the next tutorial