Я сталкиваюсь с проблемой с вложенностью маршрутизатора реагировать браузер?

Question

Итак, я использую два маршрутизатора браузера, вложенных, и когда я пытаюсь загрузить его по ссылке, он работает, но когда я пытаюсь обновить sh, вся страница исчезает, и я ничего не могу получить на экране.

Вот мой основной маршрутизатор, а мой вспомогательный маршрутизатор находится внутри 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>

Вот мой код компонента Admin Dashboard.

<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>

Answer 1

Вы бы попробовали использовать NestedRouter? Для большей идеи следуйте этому https://github.com/ReactTraining/react-router/issues/5291 Дайте мне знать, если это работает ...