Pasar accesorios personalizados al componente del enrutador en reaccionar-router v4

Estoy usando React Router para crear una aplicación de varias páginas. Mi componente principal es <App/>y representa todo el enrutamiento a componentes secundarios. Estoy tratando de pasar accesorios a través de la ruta y, según algunas investigaciones que hice, la forma más común para que los componentes secundarios aprovechen los accesorios transmitidos es a través del this.props.routeobjeto que heredan. Sin embargo, este objeto no está definido para mí. En mi render()función en el componente secundario, console.log(this.props)devuelvo un objeto que se parece a este

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

No se parece en nada a los accesorios que esperaba. Aquí está mi código en detalle.

Componente principal (estoy intentando pasar la palabra "hola" como un accesorio llamado "prueba" en todos mis componentes secundarios):

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>
    );
  }
}

Niño:

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>);
  }
}

Soy bastante nuevo en React, así que me disculpo si me falta algo obvio. ¡Gracias!

May 30 '17 13:05 Mark Romano