Using link components

In this section, we'll look at creating links. You might be tempted to use the standard <a> elements to link to pages controlled by react-router. The problem with this approach is that these links will try to locate the page on the backend by sending a GET request. This isn't what we want to happen, because the route configuration is already in the browser.

We'll start with a very simple example that illustrates how <Link> elements are just like <a> elements in most ways. Then, you'll see how to build links that use URL parameters and query parameters.

Basic linking

The idea of a link is pretty simple. We use it to point to routes, which subsequently render new content. However, the Link component also takes care of the browser history and looking up routes. Here's an application component that renders two links:

import React, { PropTypes } from 'react'; 
import { Link } from 'react-router'; 
 
const App = ({ content }) => ( 
  ...