How to fix history.push in all .js file? - reactjs

Question

I'm creating a router in App.js file.
I'm creating a login page and I change page with this.props.history.push('/homepage') to go to the homepage. It works.
Now I'm in /homepage and i would like to do the same but it don't works ...
I make: this.context.history.push('/test'); and I've got an error "TypeError: Cannot read property 'push' of undefined".
I already tried to use "this.context.router.history.push('/page');" but i have the same error. I tried to use browserHistory instead of HashRouter but it don't works.
The only thing who work is to create functions and to call them with the buttonclick. But i can't do it with the react way !
Include App.js:
import React, {Component} from 'react';
import {HashRouter as Router, Route} from 'react-router-dom';
import HomePage from './dashboard/Dashboard';
import Register from "./login/Register"
import Login from "./login/Login"
import Admin from "./admin/Admin"
class App extends Component {
render() {
return (
<Router basename="/">
<div>
<Route exact path="/" component={Login}>
</Route>
<Route exact path="/homepage" component={HomePage}>
</Route>
<Route exact path="/register" component={Register}>
</Route>
<Route exact path="/login" component={Login}>
</Route>
<Route exact path="/admin" component={Admin}>
</Route>
</div>
</Router>
);
}
}
export default App;
Include Login file
import React, {Component} from 'react';
import {Link, NavLink} from 'react-router-dom';
import O2Connexion from './O2Connexion'
import "../App.css"
import Axios from 'axios'
import AreaLogo from '../ressources/arealogo.png'
class Login extends Component {
constructor() {
super();
this.state = {
email: '',
password: '',
test: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
let target = e.target;
let value = target.type === 'checkbox' ? target.checked : target.value;
let name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(e) {
e.preventDefault();
this.props.history.push('/homepage')
}
}
render() {
...
Include NavBar file
import React, { Component } from 'react';
import { Layout, Header, Navigation, Content } from 'react-mdl';
import {HashRouter as Router, Route, Link} from 'react-router-dom';
class Navbar extends Component {
constructor(props) {
super(props);
this.test = this.test.bind(this);
}
test(e) {
e.preventDefault();
//ne marche pas comme ça
this.context.history.push('/homepage');
}
render() {
return (
<div style={{height: '300px', position: 'relative'}}>
<Layout fixedHeader>
<Header title={<span><span style={{ color: '#ddd' }}>Area</span></span>}>
<Navigation>
<a onClick={this.test}>Home Page</a>
<a>Admin</a>
<a>Log out</a>
</Navigation>
</Header>
<Content />
</Layout>
</div>
);
}
}
export default Navbar;
So it don't works on the navabar file and i have no idea why
Can someone explain me why it don't works and if it exist a "reactjs" way to do it ? Thank you and have a nice evenning

Answer 1

You have to wrap your components with withRouter hoc like:
import React, { Component } from 'react';
import { withRouter } from 'react-router';
class Navbar extends Component { ... }
const NavbarWithRouter = withRouter(Navbar);
export default NavbarWithRouter;
Doing this way you could access match, location, history inside Navbar's component props
You need to repeat steps above for each component where you need access for seeking properties