Reactjs nested router does not work on refresh - django

Question

Hello i am using ReactJs as my frontend for my django project. Im encountering this issue because i wish to separate my login page from my main layout. As such i adopted such a hierarchy of components:
App.js -> [Main.js -> (Layout.js, etc..) , Login.js]
Apologies for my bad illustration above , here is my code:
App.js
class App extends Component {
###some code####
render() {
if (this.state.checking === true ) {
return <Spin size="large" />
} else {
console.log('state = complete load')
return (
<AlertProvider template={AlertTemplate}{...alertOptions}>
<Router>
<Alerts/>
<Switch>
<PrivateRoute exact path="/" component={Main}/>
<Route exact path="/login" component={Login}/>
</Switch>
</Router>
</AlertProvider>
)
}
}
}
Main.js
export class Main extends Component {
render() {
return (
<Router>
<LayoutHeader>
<BaseRouter/>
</LayoutHeader>
</Router>
)
}
}
export default Main;
Router.js
const BaseRouter = () => (
<div>
<Switch>
<PrivateRoute path="/" exact component={Home} />
<PrivateRoute path="/hello" exact component={hello} />
<Route exact path="*" component={() => '404 NOT FOUND'} />
</Switch>
</div>
);
export default BaseRouter;
Upon refreshing the page in /hello im greeted with a blank page. I don't understand whats going on here , would someone explain to me? Thank you!