React: Invalid prop type Link when using JSX
<p>Below is a dummied-down version of what I'm doing</p>

<p>When clicking on the Skip button I'm getting info from a random "page" then using this.state to show it.</p>

<pre><code>import React from "react"
import { Link } from 'react-router'

const MyComponent = React.createClass({
  getRandomPage () {
    var pages = [
      {
        link: "/1_page_one",
        title: "title one",
        description: "Description1"
      },
      {
        link: "/2_page_two",
        title: "title Two",
        description: "Description2"
      },
      {
        link: "/3_page_three",
        title: "title three",
        description: "Description3"
      }
    ]
    var randomNum = Math.floor(Math.random() * pages.length);
    this.setState({page: pages[randomNum]});
  },
  getInitialState () {
    return {
      page: "hi"
    }
  },
  render () {
      console.log(this.state.page.link);
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;li&gt;&lt;Link to="/1_page_one"&gt;&lt;button type="submit"&gt;To Page&lt;/button&gt;&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button onClick={this.getRandomPage} type="submit"&gt;Skip&lt;/button&gt;&lt;/li&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h1&gt;{this.state.page.title}&lt;/h1&gt;
        &lt;h2&gt;Description&lt;/h2&gt;
        &lt;div&gt;
          {this.state.page.description}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
});

export default MyComponent;
</code></pre>

<p>Everything seems to work fine except when I try to change </p>

<pre><code> &lt;li&gt;&lt;Link to="/1_page_one"&gt;&lt;button type="submit"&gt;To Page&lt;/button&gt;&lt;/Link&gt;&lt;/li&gt;
</code></pre>

<p>to </p>

<pre><code> &lt;li&gt;&lt;Link to={this.state.page.link}&gt;&lt;button type="submit"&gt;To Page&lt;/button&gt;&lt;/Link&gt;&lt;/li&gt;
</code></pre>

<p>I get an error saying :</p>

<pre><code>main.js:8715 Warning: Failed prop type: Invalid prop `to` supplied to `Link`.
    in Link (created by ChallengeBoxes)
    in ChallengeBoxes (created by MainContent)
    in div (created by MainContent)
    in MainContent (created by RouterContext)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router
</code></pre>

<p>But when checking to see what the value is with </p>

<blockquote>
  <p>console.log(this.state.page.link);</p>
</blockquote>

<p>The link in state is a correct string such as "/1_page_one"? </p>

<p>What's going wrong?</p>