title: How to access passed data using router from one component to another ReactJS
body: <p><a href="https://i.stack.imgur.com/DsdId.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DsdId.png" alt="This is the error while accessing passed data variable from previous page using react-router" /></a></p>
  <pre><code>//import routes from &quot;./routes&quot;;
  import { Link, withRouter, NavLink, useHistory } from &quot;react-router-dom&quot;;
  
  export default function App() {
    console.log(this.props.data.data);
    const [value1, setValue1] = useState(0);
    const [value2, setValue2] = useState(0);
  ...}
  </code></pre>
  <h2>This part of code in slider.js accessing data variable passed from last page, mentioned below</h2>
  <pre><code>        axios
          .post(
            &quot;/get_spec_other&quot;,
            {
              selected_country: this.props.selectedCountry,
              selected_disease: this.props.selectedDisease,
              selected_drug: this.props.selectedDrugs,
            },
            { headers: { &quot;content-type&quot;: &quot;application/json&quot; } }
          )
          .then((res) =&gt; {
            const SpecificationName = Array.from(res.data);
            console.log(res.data);
            this.props.history.push({pathname: '/slider', data: res.data});
  
            alert(res.data);
  </code></pre>
  <h2>This is where I am passing data to /slider, and opening slider.js .</h2>