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 }) => ( 
  <section> 
    {content} 
  </section> 
); 
 
App.propTypes = { 
  content: PropTypes.node.isRequired, 
}; 
 
// The "content" property has the default content 
// for the "App" component. The "<Link>" elements 
// handle dealing with the history API. Regular 
// "<a>" links result in requests being sent to 
// the server. 
App.defaultProps = { 
  content: ( 
    <section> 
      <p><Link to="first">First</Link></p> 
      <p><Link to="second">Second</Link></p> 
    </section> 
  ), 
}; 
 
export default App; 

The to property specifies the route to activate when clicked. In this case, the application has two routes—/first and /second. So here's what the rendered links look like:

And if you click the first link, the page content changes to look like this:

Constructing the dynamic segments of a path that's passed to <Link> is simple string manipulation. Everything that's part of the path goes in the to property. This means that we have to write more code ourselves to construct the string, but it also means less behind-the-scenes magic on behalf of the router.

On the other hand, the query property of <Link> accepts a map of query parameters and will construct the query string for you. Let's create a simple component that will echo back whatever is passed to the echo URL segment or the echo query parameter:

import React from 'react'; 
 
// Simple component that expects either an "echo" 
// URL segment parameter, or an "echo" query parameter. 
export default ({ 
  params, 
  location: { 
    query, 
  }, 
}) => ( 
  <h1>{params.echo || query.echo}</h1> 
); 

Now let's take a look at the App component that renders two links. The first will build a string that uses a dynamic value as a URL parameter. The second will pass an object to the query property to build the query string:

import React, { PropTypes } from 'react'; 
import { Link } from 'react-router'; 
 
const App = ({ content }) => ( 
  <section> 
    {content} 
  </section> 
); 
 
App.propTypes = { 
  content: PropTypes.node.isRequired, 
}; 
 
// Link parameter and query data... 
const param = 'From Param'; 
const query = { echo: 'From Query' }; 
 
App.defaultProps = { 
  content: ( 
    <section> 
      { /* This "<Link>" uses a parameter as part of 
           the "to" property. */} 
      <p><Link to={`echo/${param}`}>Echo param</Link></p> 
 
      { /* This "<Link>" uses the "query" property 
           to add query parameters to the link URL. */ } 
      <p><Link to="echo" query={query}>Echo query</Link></p> 
    </section> 
  ), 
}; 
 
export default App; 

Here's what the two links look like when they're rendered:

The param link takes you to /echo/From Param, which looks like this:

The query link takes you to /echo?echo=From+Query, which looks like this: