title: React: Passing data from between components via Route
body: <p>I have a child component:</p>
  
  <pre><code>import * as React from 'react';
  import Select from 'react-select';
  
  import { Link } from 'react-router-dom';
  import { Button } from '../controls/Button/Button';
  import { ISelectedItem } from '../../interfaces/ISelectedItem';
  
  import * as service from "../../helpers/service";
  
  export interface IProps{
      onClickRender: (selectedItem: ISelectedItem) =&gt; void;
  }
  
  export interface IState {
      customerData: ISelectedItem[];
      selectedItem: ISelectedItem;
  }
  
  export class DropDownSearch extends React.Component&lt;{}, IState&gt;{
      constructor(props: any) {
          super(props);
          this.state = ({
              customerData: [],
              selectedItem: { shortName: '', description: '' }
          });
      }
  
      componentDidMount() {
          service.fetchJson&lt;ISelectedItem[]&gt;("/api/customers")
              .then((json) =&gt;{
                  this.setState({
                      customerData: json
                  });
              });
      }
  
      handleChange = (selectedItem: any) =&gt; {
          this.setState({
              selectedItem
          });
      }
  
      render() {
          const { selectedItem } = this.state;
          const value = selectedItem &amp;&amp; selectedItem;
  
          return (
              &lt;div&gt;
                  &lt;Select
                      name="form-field-name"
                      value={this.state.selectedItem}
                      onChange={this.handleChange}
                      options={this.state.customerData}
                      labelKey="shortName"
                  /&gt;
  
  
  &lt;Link to={{
   path "/dashboard/" + this.state.selectedItem.shortName,
   state: { detail : this.state.selectedItem }
  }}&gt;
                      &lt;Button type="button" className="btn btn-primary" caption="Search" /&gt;
                  &lt;/Link&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I want to pass the <code>this.state.selectedItem</code> to the Dashboard component, which is part of the Route config in the parent component below:</p>
  
  <pre><code>import * as React from 'react';
  
  import { Navbar } from './Navbar/Navbar';
  import { ShortNameSelector } from './ShortNameSelector/ShortNameSelector';
  import { Dashboard } from './Dashboard/Dashboard';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  
  export class App extends React.Component&lt;{},{}&gt;{
      render(){
          return(
              &lt;BrowserRouter&gt;
                  &lt;div className="container"&gt;
                      &lt;Navbar /&gt;
                      &lt;div className="col-lg-12"&gt;
                          &lt;Switch&gt;
                              &lt;Route exact path="/" component={ShortNameSelector} /&gt;
                              &lt;Route path="/dashboard" component={Dashboard} /&gt;
                          &lt;/Switch&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
          );
      }
  }
  </code></pre>
  
  <p>Problem is I'm using Routes to switch components on the button click in my child components. How do I pass the <code>this.state.selectedItem</code> object from child to the Dashboard component (shown in parent component) via Routes?</p>
  
  <p>EDIT: </p>
  
  <p>So I put the state attribute inside <code>Link</code> tag and referenced it in Dashboard component like <code>this.props.location.state.detail</code> and it works. But now I want to persist the data in that route/Dashboard component when I open that link in a new page. How do I go about it?</p>