So here i am usign two browser router nested and when i try to load it using link it works but when i try to refresh the page all content goes away and i can't get anything on screen.
Here is my main router and my sub router is inside AdminDashboard.
<BrowserRouter>
<Switch>
<Route exact path={"/"} render={props => (
<Login />
)} />
<Route exact path={"/registration"} render={props => (
<Registration />
)} />
<Route exact path={"/admin/dashboard"} render={props => (
<AdminDashboard />
)} />
<Route exact path={"/judge/dashboard"} render={props => (
<JudgeDashboard />
)} />
<Route exact path={"/dashboard"} render={props => (
<StudentDashboard />
)} />
</Switch>
</BrowserRouter>
Here is my Admin Dashboard component code.
<BrowserRouter>
<SideDrawer showSideDrawer={this.state.SideDrawerOpen}/>
{backDrop}
<Toolbar drawerClickHandler={this.drawerToggleHandler} SidebarOpen={this.state.SideDrawerOpen} title1={this.state.title}/>
<main className="admin-main">
<div>
<Switch>
<Route exact path="/admin/dashboard" render={()=><CompetitionList onchangeLocation={this.changeLocation}/>}/>
<Route path="/admin/competitionDetails/:comp_id" component={CompetitionDetails} />
<Route exact path="/admin/studentlist" render={()=><StudentList onchangeLocation={this.changeLocation}/>}/>
<Route exact path="/admin/profile" render={()=><Profile onchangeLocation={this.changeLocation}/>}/>
<Route exact path="/admin/judgelist" render={()=><JudgeList onchangeLocation={this.changeLocation}/>}/>
<Route exact path="/admin/adminlist" render={()=><AdminList onchangeLocation={this.changeLocation}/>}/>
<Route exact path="/admin/addcompetition" render={()=><AddCompetition onchangeLocation={this.changeLocation}/>} />
<Route path="/admin/addcompetition/:comp_id" component={AddCompetition} />
<Route exact path="/admin/addsurvey" render={()=><Survey onchangeLocation={this.changeLocation}/>} />
</Switch>
</div>
</main>
</BrowserRouter>
