React router : blank page - reactjs

Question

Here is how the router I defined :
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import PersonsList from './PersonsList';
import Error from './Error'
import Person from './Person'
const Router = () => (
<BrowserRouter>
<Switch>
<Route path="/persons" strict={false} component={PersonsList}/>
<Route path="/persons/:id" component={Person}/>
<Route component={Error}/>
</Switch>
</BrowserRouter>
);
export default Router;
The first route works perfectly.
The problem is that in the PersonsList, when I try to reach the /persons/:id route, I get a blank page.
Here is the code I use for redirection in the PersonsList component :
static propTypes = {
history: PropTypes.object
};
handleRedirection = (aPerson) => {
this.props.history.push(`/persons/${aPerson.id}`);
}
...
{this.state.persons.map(aPerson => (
<React.Fragment key={aPerson.id}>
<div className="row" onClick={this.handleRedirection.bind(this,aPerson)}>
Here is the Person component :
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
class Person extends React.Component {
static propTypes = {
match: PropTypes.object
};
constructor(props){
super(props);
console.log('the selected person : ' + this.props.match.params.id);
}
render(){
return(
<div>A person</div>
)
}
}
export default withRouter(Person);
I can see the console.log output but no rendering of the <div>A person</div>.
Question
Why the second route returns a blank content knowing its component's constructor is called? Why the rendering is not processed ?

Answer 1

i try this.props.history.push('/home'); code part but not correct running.
you can see my component codes in the below.
my full component code :
class Full extends Component {
render() {
return (
<div className="app">
<Header/>
<div className="app-body">
<Sidebar {...this.props}/>
<main className="main">
<Breadcrumb/>
<Container fluid>
<Switch>
<Route path="/dashboard" name="Dashboard" component={Dashboard}/>
<Route path="/applications" name="Applications" component={Applications}/>
<Route path="/roles" name="Roles" component={Roles}/>
<Route path="/poc" name="poc" component={Poc}/>
<Redirect from="/home" to="/dashboard"/>
</Switch>
</Container>
</main>
<Aside/>
</div>
<Footer/>
</div>
);
}
}
Dashboard component code :
class Dashboard extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="animated fadeIn">
<div>test</div>
</div>
)
}
}
export default Dashboard;
History Code:
import {createBrowserHistory} from 'history';
export const history = createBrowserHistory();