Unable to read push property from undefined

Question

I am trying to do a very simple thing using a router. But I continue to make mistakes - "I can not read the" push "property from undefined". This happens when I click on the test link.

import { Router, useRouterHistory, Route } from 'react-router';
import { createHashHistory } from 'history';
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

ReactDOM.render(React.createElement(nav), document.getElementById('navComponent'));

ReactDOM.render((
    <Router history={appHistory}>
        <Route path="test" component={Test}/>
    </Router>
), document.getElementById('mainContainer'));

nav component

render() {
        return (
            <div>
              <ul>
               <li><Link to="/test"> Test </Link></li>
              </ul>    
            </div>
        );
    };

Test component

render() {
        return (
            <div>
              Hello World!   
            </div>
        );
    };

Can someone help me? stuck here.

Update 1

clicking is part of a reaction router

this.context.router.push(_location);

Package.json

{

  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.1.1",
    "gulp-util": "^3.0.7",
    "imports-loader": "0.6.4",
    "istanbul-instrumenter-loader": "0.1.3",
    "jasmine": "2.3.2",
    "jasmine-core": "2.3.4",
    "jquery": "1.11.3",
    "moment": "2.10.6",
    "react": "0.14.2",
    "react-addons-test-utils": "0.14.2",
    "react-dom": "0.14.2",
    "redux": "3.0.3",
    "rewire": "2.5.1",
    "rewire-webpack": "1.0.1",
    "run-sequence": "^1.1.5",
    "style-loader": "0.12.4",
    "underscore": "1.8.3",
    "webpack-stream": "^3.1.0"
  },
  "dependencies": {
    "react-router": "^2.0.0",
  }
}

Update 2 Sorry for the fact that I do not understand my question, I updated my question, I hope now it makes more sense.

Answer 1

. , . "/" "/"

<Router history={appHistory}>
        <Route path="/" component={Main}>
            <Route path="test" component={Test}/>
            <Route path="*" component={Test}/>
        </Route>
</Router>

const Main = ({children, history}) => {
return (
<div>
<nav>
        <div history={history}/>
      </nav>
      <div>
        {children}
      </div>
</div>
 )
}