title: How to pass props/state through Link and Route - react.js
body: <p>I'm in the middle of creating my first web app made with react.js (create-react-app and react-router 3.0.2, no redux) and i've encountered a problem with passing a property through the Link and Route (i'm not sure if what i'm trying to do is a correct approach in "react way" of making an app)</p>
  
  <p>Idea is that AddCost component (which im not pasting since it's irrelevant) should render a little bit different depending on a property passed onto it. However i'm not sure how to do it (and if it's even possible that way)</p>
  
  <p>Index.js is the main rendering component, App.js is the main container and div with className='content' is where i want to {Home} and {AddCost} to render interchangeably (when i clink on one of the links in {Home} i want to {AddCost} render in the same place as {Home} was rendered before (and that works) but i cant get to pass a prop to the {AddCost} component depending on which of the links i click)</p>
  
  <p>So the main questions is as in title, how to pass information from {Home} to {AddCost} when react-router is used for routing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Index.js
  
  import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './components/App'
  import Home from './components/Home'
  import Stats from './components/Stats'
  import Account from './components/Account'
  import AddCost from './components/AddCost'
  import { Router, Route, IndexRoute, hashHistory } from 'react-router'
  import './index.css'
  
  ReactDOM.render(
    &lt;Router history={hashHistory}&gt;
      &lt;Route path="/" component={App}&gt;
        &lt;IndexRoute component={Home} /&gt;
        &lt;Route path="/AddCost" component={() =&gt; (&lt;AddCost costType="value" /&gt;)}/&gt;
        &lt;Route path="/stats" component={Stats} /&gt;
        &lt;Route path="/account" component={Account} /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;,
    document.getElementById('root')
  )
  
  //App.js
  
  import React, { Component } from 'react'
  import './App.css'
  import Header from './Header'
  
  class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        costType: null
      }
    }
    render() {
      return (
        &lt;div className='App'&gt;
            &lt;Header /&gt;
            &lt;div className="content"&gt;
              {this.props.children}
            &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default App
  
  //Home.js
  
  import React, { Component } from 'react'
  import { Link } from 'react-router'
  import './Home.css'
  
  class Home extends Component {
    render() {
      const costTypes = [
        { text: 'Health', icon: 'fa fa-heart' },
        { text: 'Bills', icon: 'fa fa-home' },
        { text: 'Gas', icon: 'fa fa-car' },
        { text: 'Vacation', icon: 'fa fa-plane' },
        { text: 'Lunch', icon: 'fa fa-coffee' },
        { text: 'Groceries', icon: 'fa fa-shopping-cart' },
        { text: 'Leisure', icon: 'fa fa-glass' },
        { text: 'Leisure', icon: 'fa fa-glass' },
      ]
      const listItems = costTypes.map((type, i) =&gt; (
        &lt;Link key={i} className='cost__element' to='/addcost'&gt;
          &lt;i className={type.icon} aria-hidden="true"&gt;&lt;/i&gt;
          &lt;h1&gt;{type.text}&lt;/h1&gt;
        &lt;/Link&gt;
      ))
      return (
        &lt;section className='home'&gt;
          &lt;ul className='costList'&gt;{listItems}&lt;/ul&gt;
        &lt;/section&gt;
      )
    }
  }
  
  export default Home</code></pre>
  </div>
  </div>
  </p>
  
  <p>Additionally i'll gladly accept information about any major mistakes or bad practice examples.</p>