I'm using React Router to create a multi page app. My main component is <App/> and it renders all of the routing to to child components. I'm trying to pass props via the route, and based on some research I did, the most common way for child components to tap into props passed down is via the this.props.route object that they inherit. However, this object is undefined for me. On my render() function in the child component, I console.log(this.props) and am return an object that looks like this

{match: Object, location: Object, history: Object, staticContext: undefined}

Doesn't look like the props I expected at all. Here is my code in detail.

Parent Component (I'm trying to pass the word hi down as a prop called test in all of my child components):

import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom';

import Link from 'react-router';

import React from 'react';



import Home from './Home.jsx';

import Nav from './Nav.jsx';

import Progress from './Progress.jsx';

import Test from './Test.jsx';







export default class App extends React.Component {



  constructor() {

    super();



    this._fetchPuzzle = this._fetchPuzzle.bind(this);

  }



  render() {

    return (

      <Router>

        <div>

          <Nav />

          <Switch>

            <Route path=/ exact test=hi component={Home} />

            <Route path=/progress test=hi component={Progress} />             

            <Route path=/test test=hi component={Test} />

            <Route render={() => <p>Page not found!</p>} />

          </Switch>

        </div>

      </Router>

    );

  }

}

Child:

import React from 'react';

const CodeMirror = require('react-codemirror');

import { Link } from 'react-router-dom';



require('codemirror/mode/javascript/javascript')



require('codemirror/mode/xml/xml');

require('codemirror/mode/markdown/markdown');



export default class Home extends React.Component {



  constructor(props) {

    super(props);



    console.log(props)



  }



  render() {

    const options = {

      lineNumbers: true,  

      theme: 'abcdef'    

      // mode: this.state.mode

    };

    console.log(this.props)



    return (

      <div>

        <h1>First page bro</h1>        

        <CodeMirror value='code lol' onChange={()=>'do something'} options={options} />

      </div>);

  }

}

I'm pretty new to React so my apologies if I'm missing something obvious.
Thanks!