React Router рендеринг 404 не найден при перезагрузке

Question

Я настроил свое приложение. js, как показано ниже.

<Router>
    <Switch>
        <Route exact path="/" component={HomePage}/>
        <Route exact path="/location" component={LocationSettings}/>                      
        <Route exact path="/edit" component={Edit}/>
        <Route exact path="/changeName" component={ChangeName}/>
        <Route exact path="/testHtml" component={TestLive}/>
        <Route exact path="/content" component={Content}/>
        <Route component={NotFoundPage}/>
     </Switch>
</Router>

А внутри компонента Content у меня есть следующие маршруты

 <Router>
    <Switch>
      <Route exact path={`${match.path}`}          component={SideBar}/>
      <Route exact path={`${match.path}/section1`} component={Section1}/>
      <Route exact path={`${match.path}/section2`} component={Section2}/>
      <Route exact path={`${match.path}/section3`} component={Section3}/>
      <Route exact path={`${match.path}/section4`} component={Section4}/>
    </Switch>                   
  </Router>

Разделы, т.е. section1, section2, et c отображаются на левой боковой панели в небольшой части. Он работает нормально, пока я не перезагрузить страницу после маршрутизации в разделы. После перезагрузки отображается компонент NotFoundPage. Но это работает правильно на других страницах. Это из-за вложенности? В чем может быть проблема ?? Я использую React-Router 5.1.2

Answer 1

Удалить exact из родительского /content маршрута. Происходит следующее: когда вы говорите /content/section1 и refre sh, маршрут начинается с родительского маршрута, и, поскольку вы упомянули exact, ни один из маршрутов не соответствует. Поэтому сам компонент Content не рендерится. Поэтому ни один из его дочерних маршрутов не будет отрисован.

Сделайте это:

<Route path="/content" component={Content}/>

Всякий раз, когда у вас есть вложенные маршруты, убедитесь, что у родительского маршрута нет exact маршрут.